ngModel和formControlName处理表单控件

ngModelformControlName 不能同时在同一个表单控件上使用;
二者都用于在 Angular 中处理表单控件的值,但是它们的底层实现方式不同。

ngModel 是 Angular 提供的双向数据绑定指令,它可以将表单控件的值与组件类中的属性进行双向绑定。当你使用 ngModel 绑定一个表单控件时,它会自动创建一个 FormControl 并与该控件进行绑定,同时还会更新模板和组件类中的属性值

formControlName 是 Angular 中的一个指令,用于将模板中的表单控件与响应式表单中的对应控件进行关联。它通过提供的字符串参数来指定要绑定的表单控件的名称,并将其与父级 FormGroupFormArray 中的相应控件进行关联。

由于 ngModelformControlName 都用于处理表单控件的值,因此将它们同时应用于同一个表单控件会导致冲突

通常情况下,建议使用响应式表单,并通过 formControlName 在模板中进行绑定,而不是使用 ngModel。如果需要双向绑定表单控件的值,可以使用 valueChanges 订阅表单控件值的变化,并在组件类中手动更新属性值。

<form [formGroup]="myForm">
  <input type="text" formControlName="myControl">
</form>

<form [formGroup]="paramForm">
  <input type="text" formControlName="myControl2">
</form>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-component',
  template: `...`
})
export class MyComponent implements OnInit {
  myForm: FormGroup;
  paramForm: FormGroup;
  constructor(
  	private formbuilder: FormBuilder,
  ) {
  	this.paramForm = this.formbuilder.group({});
  }

  ngOnInit() {
    // 写法1:
    this.myForm = new FormGroup({
      myControl: new FormControl()
    });

    // 写法2:
    this.paramForm.addControl(
      'myControl2',
      this.formbuilder.control('initialValue', [...]),
    ); // ... 表示校验内容
  }
}

上述示例创建了一个响应式表单,并将其与模板中的表单控件进行了绑定。通过 formControlName 指定了要绑定的表单控件的名称,并在组件类中创建了相应的 FormControl 对象。这样,表单控件的值将自动与组件类中的属性保持同步。

你可能感兴趣的:(angular.js,javascript,前端)