ngModel和formControlName处理表单控件

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

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

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

由于 ngModel 和 formControlName 都用于处理表单控件的值，因此将它们同时应用于同一个表单控件会导致冲突。

通常情况下，建议使用响应式表单，并通过 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 对象。这样，表单控件的值将自动与组件类中的属性保持同步。