@angular/form 表单

最近学习了 angular 表单。

1. 表单绑定数据,目前有两种方法:

    1. [(ngModel)]=”name”;  // 双向绑定属性值

    2. formControlNam=”name”;  // 按名称FormControl将现有FormGroup的a 同步到表单控件元素。

例如:

import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
 
@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()"> <!-- 这里必须写 [formGroup]="form" 绑定下方 new FormGroup()  -->
      <div *ngIf="first.invalid"> Name is too short. </div>
 
      <input formControlName="first" placeholder="First name"> <!-- formControlName 绑定的是下方 new FormGroup() 中 first -->
      <input formControlName="last" placeholder="Last name">
 
      <button type="submit">Submit</button>
   </form>
   <button (click)="setValue()">Set preset value</button>
  `,
})
export class SimpleFormGroup {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),  last: new FormControl('Drew'), // 'Nancy' 是 值, validators.minLength(2) 是angular默认表单验证,也可以自定义验证
  });
 
  get first(): any { return this.form.get('first'); } // 必须写 这个方法,之后才可以获取到表单的值
 
  onSubmit(): void {
    console.log(this.form.value);  // {first: 'Nancy', last: 'Drew'} // 获取 值
  }
 
  setValue() { this.form.setValue({first: 'Carson', last: 'Drew'}); } // 改变 first 与 last 表单的值
}

app.module.ts 引入必须 

import { FormsModule, ReactiveFormsModule } from “@angular/forms”;

否者 不可以用 formControlName

注:formControlName 与 ngModel 使用

在Angular v6中不支持将ngModel输入属性和ngModelChange事件与反应式表单指令一起使用,并且将在Angular v7中删除。

现已弃用:

content_copy<form [formGroup]="form"> <input formControlName="first" [(ngModel)]="value"> </form> <!-- 不要一起用了 -->
content_copythis.value = 'some value';

由于一些原因,这已被弃用。首先,开发人员发现这种模式令人困惑。看起来似乎ngModel正在使用实际的指令,但实际上它是ngModel在反应式表单指令上命名的输入/输出属性,它简单地近似(某些)其行为。具体来说,它允许获取/设置值和拦截值事件。然而,ngModel其他一些功能 – 比如延迟更新ngModelOptions或导出指令 – 根本不起作用,这可以理解地引起一些混乱。

此外,这种模式混合了模板驱动和反应形式策略,我们通常不建议这样做,因为它没有利用这两种策略的全部好处。在模板中设置值违反了反应形式背后的模板无关原则,而在类中添加FormControlFormGroup层则消除了在模板中定义表单的便利性。

发表评论

电子邮件地址不会被公开。 必填项已用*标注