首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

修改此方法,使其应用于表单组中除最后一项之外的所有项。Angular 7反应形式。没有jquery或ngModel

在Angular 7中,可以使用反应式表单来实现修改表单组中除最后一项之外的所有项。反应式表单是一种基于响应式编程的方式来处理表单数据的方法。

首先,需要在组件的模块文件中导入必要的模块和类:

代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';

然后,在组件类中定义一个表单组和表单控件:

代码语言:txt
复制
@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  formGroup: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      formArray: this.formBuilder.array([])
    });
  }

  get formArray(): FormArray {
    return this.formGroup.get('formArray') as FormArray;
  }

  addItem() {
    this.formArray.push(this.formBuilder.control(''));
  }

  removeItem(index: number) {
    this.formArray.removeAt(index);
  }

  submitForm() {
    // 处理表单提交逻辑
  }
}

在模板文件中,可以使用formArray来遍历表单组中的每一项,并且通过*ngIf指令来判断是否为最后一项:

代码语言:txt
复制
<form [formGroup]="formGroup" (ngSubmit)="submitForm()">
  <div formArrayName="formArray">
    <div *ngFor="let control of formArray.controls; let i = index">
      <input [formControlName]="i" *ngIf="i !== formArray.length - 1">
    </div>
  </div>
  <button type="button" (click)="addItem()">添加项</button>
  <button type="submit">提交</button>
</form>

在上述代码中,addItem()方法用于添加新的表单项,removeItem(index: number)方法用于移除指定位置的表单项,submitForm()方法用于处理表单提交逻辑。

这样,就可以实现修改表单组中除最后一项之外的所有项的功能。在Angular 7中,使用反应式表单可以更好地管理表单数据,并且提供了更强大的表单验证和处理能力。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。

  • 腾讯云云服务器(CVM):腾讯云提供的弹性计算服务,可快速创建和管理云服务器实例,支持多种操作系统和应用场景。了解更多信息,请访问:腾讯云云服务器
  • 腾讯云云数据库MySQL:腾讯云提供的高性能、可扩展的关系型数据库服务,支持自动备份、容灾和监控等功能。了解更多信息,请访问:腾讯云云数据库MySQL
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 指南- 表单

模板驱动形式 您可以通过使用本页描述特定于表单指令和技术在Angular模板语法编写模板来构建表单。 您也可以使用响应式(模型驱动)方法来构建表单。...建立 按照设置说明创建一个名为表单新项目。 添加angular_forms Angular表单功能位于angular_forms库,该库位于其自己。 将该包添加到pubspec依赖: ?...你还没有使用Angular没有绑定额外指令,只是布局。 在模板驱动表单,如果已经导入了angular_forms库,则不必为了使用库功能而对标记执行任何操作。...将[(ngModel)]与表单结合使用时,定义ngControl指令是一项要求。...'is-valid' : 'is-invalid'; return {validityClass: true}; } 使用方法返回映射值绑定到NgClass指令 - 在模板语法页面详细了解指令及其替代方法

17.4K30

Angular 从入坑到挖坑 - 表单控件概览

四、Step by Step 4.1、表单简介 用来处理用户输入,通过从视图中捕获用户输入事件、验证用户输入是否满足条件,从而创建出表单模型修改组件数据模型,达到获取用户输入数据功能 模板驱动表单...响应式表单 建立表单 由组件隐式创建表单控件实例 在组件类中进行显示创建控件实例 表单验证 指令 函数 在表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定数据模型来完成数据更新,...而响应式表单表单数据发生变更时,FormControl 实例会返回一个新数据模型,而不是直接修改原来数据模型 4.2、模板驱动表单 通过使用表单专属指令(例如 ngModel 进行双向数据绑定)...使用 FormBuilder 构建控件,每个控件名对应值都是一个数组,第一个值为控件默认值,第二和第三则是针对这个值设定同步、异步验证方法 import { Component, OnInit...然后,一旦控件数据发生了变化,angular 就会调用这些函数 这里创建针对指定控件 getter 方法,从而在模板通过方法来获取到指定控件状态信息 import { Component, OnInit

18.9K20

AngularDart4.0 指南- 模板语法二 顶

本节介绍最常用属性指令: NgClass:添加和删除一CSS类。 NgStyle:添加和删除一HTML样式。 NgModel:双向数据绑定到HTML表单元素。...Angular所有基本HTML表单元素提供值访问器,Forms指南展示了如何绑定到它们。...是否有理由回到扩展形式? [(ngModel)]语法只能设置数据绑定属性。 如果您需要做更多不同事情,您可以编写扩展表单。...它别无选择,只能拆除旧DOM元素并插入所有DOM元素。 Angular可以通过trackBy避免这种流失。 向组件添加一个返回NgFor应跟踪值方法。 在这个例子,这个值就是英雄ID。...heroForm值是什么? heroForm是一个Angular NgForm指令引用,可以跟踪表单每个控件值和有效性。 原生元素没有form属性。

29.9K20

(转) 别再对 Angular 表单 ControlValueAccessor 感到迷惑

如果你使用响应式表单,你需要显式创建 FormControl 对象,并使用 formControl formControlName 指令来绑定原生控件;如果你使用模板驱动方法,FormControl...对象会被 NgModel 指令隐式创建(译者注:可查看 Angular 源码这一行): @Directive({ selector: '[ngModel]...Angular 也为所有原生 DOM 表单元素创建了 Angular 表单控件(译者注:Angular 内置 ControlValueAccessor): Accessor Form Element...,当 Angular 在组件模板遇到 input textarea DOM 原生控件时,会使用DefaultValueAccessor 指令: @Component({ selector:...组件封装器 由于 Angular所有默认原生控件提供了控件值访问器,所以在封装第三方插件组件时,需要写一个新控件值访问器。

3.7K20

Angular 内容投影

在介绍 content projection 之前,我们先来观察一下以下表单。对于同一个系统来说,下面的两个表单区别在于使用不同标题。...答案是可以,在 Angular 引入了内容投影概念,即通过使用 指令来实现内容投影功能。 ?...如果 ng-content 上没有设置 select 属性,它将接收全部内容,接收不匹配任何其他 ng-content 元素内容。...QueryList 实例除了提供 forEach() 方法之外,它还提供了数组常用方法,比如 map()、filter()、find()、some() 和 reduce() 等方法。...你可以认为它等价于 node.appendChild(el) jQuery $(node).append(el) 方法:使用这些方法,节点不被克隆,它被简单地移动到它新位置。

2.5K20

AngularDart4.0 英雄之旅-教程-03英雄编辑器

双向绑定 重塑模板英雄名称,使其看起来像这样: name: <input [(ngModel)]="hero.name" placeholder=...在表单和模板语法页面阅读有关ngModel更多信息。 @Component(指令:...) 不幸是,在这个变化之后,应用程序中断!...[(ngModel)]="hero.name" ^^^^^^^^^^^^^^^^^^^^^^^ 虽然NgModel是在angular_forms库定义有效Angular指令,但默认情况下不可用。...[formDirectives], ) angular_forms库来源于它自己包,将包添加到pubspec依赖: ?...您使用Dart模板字符串编写了多行模板,以使模板可读。 您使用内置ngModel指令向元素添加了双向数据绑定。 绑定显示Hero名称,并允许用户更改它。

3.2K10

AngularDart4.0 指南-体系结构概述 顶

虽然根模块可能是小应用程序唯一模块,但大多数应用程序都有更多功能模块,每个模块都是专用于应用程序域,工作流程紧密相关功能一致代码块。...添加绑定标记到模板HTML告诉Angular如何连接双方。 如图所示,有四种形式数据绑定语法。 每个表单都有一个方向 - 从DOM到DOM,或者在两个方向。...当用户点击英雄名字时,(click)事件绑定调用组件selectHero方法。 双向数据绑定是一个重要第四种形式,它使用ngModel指令将属性和事件绑定在一个符号。...它们倾向于以属性形式出现在元素标签内,有时候以名称形式出现,但更常见是作为赋值绑定目标。 结构指令通过添加,删除和替换DOM元素来改变布局。...ngModel通过设置其显示值属性并响应更改事件来修改现有元素(通常是)行为。

7.9K30

Angular学习笔记(一)

组件 组件负责控制视图,通过一些由属性和方法组成 API 与视图交互。 模板 模板以 HTML 形式存在,告诉 Angular 如何渲染组件。 元数据 元数据告诉 Angular 如何处理一个类。...@Component 配置包括: selector - CSS 选择器,它告诉 Angular 在父级 HTML 查找标签,创建并插入该组件。...'red' : 'green'"> 内置属性型指令 NgClass - 添加移除一CSS类 NgStyle - 添加移除一CSS样式 NgModel - 双向绑定到HTML表单元素...内置结构型指令 NgIf - 根据条件把一个元素添加到DOM从DOM移除 NgSwitch - 一指令,用于切换一视图 NgFor - 对列表每个条目重复套用同一个模板 模板引用变量 #...ngDoCheck() 检测,并在发生 Angular 无法不愿意自己检测变化时作出反应

3.3K20

angular入门教程_初学者织围巾简单教程慢动作

课程介绍 本课程是一个系列基础教程,目标是带领读者上手实战,课程以新版本 Angular 3 个核心概念作为主线:组件、路由、模块,加上业务开发过程必须用到特性:工具、指令、表单、RxJS、...Angular 项目从一开始就注意到了这个问题,所以有了 @angular/cli 这个神器,它底层基于 webpack,集成了以上提到所有 NodeJS 组件。...默认情况下,ng 命令生成出来组件都会带上一个 app 前缀,如果你不喜欢,可以在 angular-cli.json 里面修改 prefix 配置,设置为空字符串将会不带任何前缀。...目前(2017-10),@angular/cli 创建项目的时候没有自动使用 SASS 作为预编译器,我们需要自己手动修改一些配置文件,请按照以下步骤依次修改angular-cli.json 里面的...NgModel 使用案例代码: ngModel只能用在表单元素上面 <input [(ngModel)]="currentRace.name

3.3K20

Angular 6.x 基础教程

我们可以使用 ngFor 指令来显示数组一项信息。...; 语法迭代数组一项,另外我们使用 index as i 用来访问数组一项索引值。...除了 index 外,我们还可以获取以下值: first: boolean —— 若当前项是可迭代对象一项,则返回 true last: boolean —— 若当前项是可迭代对象最后一项,则返回...当在 SimpleFormComponent 组件修改 input 输入框文本消息后,点击更新按钮,将会调用 AppComponent 组件类 onUpdate() 方法,更新对应信息。...用过 AngularJS 1.x 同学,对 ng-class 应该很熟悉,通过它我们能够根据条件,为元素动态添加移除对应样式。在 Angular ,对应指令是 ngClass 。

15.6K20

Angular 5.0.0发布!

此前,如果检测到延迟加载路由,而且你在 tsconfig.json手工指定了一 files include,那这些路由会自动化处理。而如今,根据TypeScript规范,我们不再这么干了。...默认情况下,CLI对TypeScript配置没有 files include,因此多数开发者不会受影响。...Angular表单添加updateOn Blur/Submit 这样可以根据 blur submit来运行验证和更新值逻辑了,不必再单纯依赖input事件。...表单对应用很重要,如果有服务端验证,或者验证更新值会触发较慢操作,你当然希望它少跑几次。现在你可以在控件层面控制验证和更新值时机了,也可以在表单层面设置。...模板驱动表单 以前 以后 <input name="firstName" ngModel [ngModelOptions]="{updateOn

4.4K40

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

,你需要将它添加在列表所有依赖实在数组中指定依赖模块。...当加载慢时效果: ? 方法二与方法区别: 使用模块标签{{ }}加载慢渲染慢时用户将看到标签,而ng-bind不会,但是使用模块要方便。...$sce 是 angularJS 自带安全处理模块,$sce.trustAsHtml(str) 方法便是将数据内容以 html 形式进行解析并返回。...表达式会被立即计算,不像 JavaScriptonchange事件只会在最后一次改变时触发(通常,当用户离开表单元素按回车键时)。当值变化来自于模型时,不会对表达式进行计算。...2.7、ng-repeat迭代 ngRepeat指令为集合每项实例化一个模板。每个模板实例拥有自己域,使用循环变量指向当前集合上,$index指向当前项索引键值。

12.6K30

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

如果要开发基于angularJS项目,则先要添加对angularJS引用,有如下几个方法: 1)、去angular官网git下载,地址:https://github.com/angular/ 2)...,你需要将它添加在列表所有依赖实在数组中指定依赖模块。...: 方法二与方法区别: 使用模块标签{{ }}加载慢渲染慢时用户将看到标签,而ng-bind不会,但是使用模块要方便。...表达式会被立即计算,不像 JavaScriptonchange事件只会在最后一次改变时触发(通常,当用户离开表单元素按回车键时)。当值变化来自于模型时,不会对表达式进行计算。...2.7、ng-repeat迭代 ngRepeat指令为集合每项实例化一个模板。每个模板实例拥有自己域,使用循环变量指向当前集合上,$index指向当前项索引键值。

15.3K100

使用Ionic2开发Todo应用0 开始之前1 创建新Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

基本上,我们应用程序所有组件(我们应用程序将由不同组件组成)将在** src ** 文件夹(包括app文件夹根组件和在pages文件夹我们所有的页面组件)。...在我们应用程序我们要修改这个来显示所有待办事项列表。...2.3 添加项目 我们将要创建一个新组件让我们添加新todo。当然,这只是一个简单表单提供了标题和描述来创建todo。...除此之外,我们创建了saveItem函数来创建newItem对象,它使用当前标题和描述值(即我们建立双向数据绑定,无论用户输入什么),然后我们关闭视图,同时我们也传入了newItem在dismiss方法...在构造函数,我们建立一个 Storage 服务引用。 数组save函数简单地将所有放入数组并保存到存储,每当项目变化我们将调用这个函数。

6.1K50

一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

banana,或者ngModel是一个Angular指令,它负责从事件和所有那些获取价值。...使用表单Angular中使用表单有两种方法 - 一种是模板驱动,我们已经在使用其中最有价值部分:ngModel用于双向绑定。但是Angular形式不仅仅关于模型价值,也关系到有效性。...使用模板驱动表单与以前使用简单HTML表单完全相同。如果我们需要更复杂东西,那么在Angular中有一种不同形式反应式。我们将介绍转换表单后他们反应。...需要查找其定义形式。...通过使用formControlName,我们告诉Angular我们应该使用哪种反应形式字段。 就目前而言,以前方法与模板驱动表单反应形式方法之间主要区别在于反应方面的更多编码。

42.5K10

jQuery常用内容总结(三)

jQuery常用内容总结(三) 转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7571998.html 内容提要 A>表单参数序列化提交 如果没有借助jQuery...,如果参数值提交前需要在js做处理(表单参数验证参数拼接等等),这样直接把数据扔给后台童鞋,肯定不太好~   额,还可以借助前两章方法。。。可能会累死啊~,毕竟每一个表单都要单独取值。。。...总之,这样麻烦;哈哈~ヽ(●´ω`●)ノ,既然麻烦,jQuery给我们提供了两个好用方法serializeArray()和serialize() 前者可以将表单参数值序列化成一个Array形式(...额,嗯~,其实有两个小问题,如果表单一项没有填的话参数会不存在,还有一个问题是 多选框永远只会序列化第一个值,切记 切记。。。(ಠ .̫.̫...window.location.reload():这个方法是可以刷新浏览器,在js可以直接写就好~ setTimeout(方法字符串形式, 刷新时间):方法可以设置指定时间调用指定js方法

78810

jQuery常用内容总结(三)

jQuery常用内容总结(三) 转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7571998.html ---- A>表单参数序列化提交 如果没有借助jQuery...,如果参数值提交前需要在js做处理(表单参数验证参数拼接等等),这样直接把数据扔给后台童鞋,肯定不太好~   额,还可以借助前两章方法。。。可能会累死啊~,毕竟每一个表单都要单独取值。。。...总之,这样麻烦;哈哈~ヽ(●´ω`●)ノ,既然麻烦,jQuery给我们提供了两个好用方法serializeArray()和serialize() 前者可以将表单参数值序列化成一个Array形式(...额,嗯~,其实有两个小问题,如果表单一项没有填的话参数会不存在,还有一个问题是 多选框永远只会序列化第一个值,切记 切记。。。(ಠ .̫.̫...window.location.reload():这个方法是可以刷新浏览器,在js可以直接写就好~ setTimeout(方法字符串形式, 刷新时间):方法可以设置指定时间调用指定js方法

79220

jQuery常用内容总结(三)

jQuery表单可以直接提交,这样带来两个问题就是安全(get提交)表单参数验证障碍,嗯~,可能很难懂,这样吧,我先放张图,这图是原生get提交-> ?   ...,如果参数值提交前需要在js做处理(表单参数验证参数拼接等等),这样直接把数据扔给后台童鞋,肯定不太好~   额,还可以借助前两章方法。。。可能会累死啊~,毕竟每一个表单都要单独取值。。。...总之,这样麻烦;哈哈~ヽ(●´ω`●)ノ,既然麻烦,jQuery给我们提供了两个好用方法serializeArray()和serialize() 前者可以将表单参数值序列化成一个Array形式(...额,嗯~,其实有两个小问题,如果表单一项没有填的话参数会不存在,还有一个问题是 多选框永远只会序列化第一个值,切记 切记。。。(ಠ .̫.̫...window.location.reload():这个方法是可以刷新浏览器,在js可以直接写就好~ setTimeout(方法字符串形式, 刷新时间):方法可以设置指定时间调用指定js方法

1.9K90
领券