反应形式：如何在没有[（ngModel）]的情况下，使用FormControl on Angular将输入值捕获到组件内的变量中？

我的web应用程序前端有一个简单的文本输入，输入用户名：

<div [formGroup]="userNameFormGroupEnquiry">    
<mat-form-field>
      <mat-label>Chosen Name:</mat-label>
      <input name="chosenName" formControlName="chosenName" [(ngModel)]="chosenName" matInput type="text" placeholder="JOHN DOE"/>
      <mat-hint align="end">REQUIRED FIELD!</mat-hint>
      <mat-error *ngIf="hasNameError('chosenName', 'required')"
        >Minimum and Maxmimum of length 12 is required!</mat-error
      >
    </mat-form-field>
</div>

根据我上一个问题的答案，我被告知不要使用

[（ngModel）]

，因为FormControl已经包含了输入捕获，我得到了一个非常严重的警告，但怎么会这样呢

---

如果我从输入中删除

[（ngModel）]=“chosenName”

，则不会为

捕获该输入。chosenName

，控制台会记录一个空白/未定义的输出。这里缺少什么吗？

如果需要任何初始值，请使用该值初始化

chosenName

chosenName: string = '';

然后可以使用以下值初始化表单：

this.enquiryByUserInputForm = new FormGroup({
  chosenName: new FormControl(this.chosenName, [Validators.required, Validators.minLength(9), Validators.maxLength(9)])
});

提交时，您可以使用以下方式访问所有表单值：

  onSubmit() {
      console.log(this.enquiryByUserInputForm.value);
  }

要获取特定的控制值，可以执行以下操作：

  onSubmit() {
      console.log(this.enquiryByUserInputForm.get('chosenName').value);
  }

编辑：

---

chosenName

类属性可以完全省略，因为它仅用于初始化，您可以在创建表单时直接执行此操作。

如果您使用的是ReactiveFormsModule，则可以订阅值更改

this.userNameFormGroupEnquiry.valueChanges.subscribe(values => do something)

值将是一个对象，其中{formcontrolname:valueofinput}

这将在每次任何输入改变时触发，太频繁了。所以你可以做一些事情来控制事情

this.userNameFormGroupEnquiry.valueChanges.pipe(
     filter(() => this.userNameFormGroupEnquiry.valid && 
                  this.userNameFormGroupEnquiry.dirty),
     debounceTime(1000))
    .subscribe(values => do something)

这将检查表格中的更改和有效性，以及去Bounce；这意味着它将在最后一次击键后发出第二次。这仍然经常发生，还有一件事你可以做

定义表单控件时，可以执行以下操作：

this.userNameFormGroupEnquiry = new FormGroup( {
    chosenName: new FormControl('', { updateOn: 'blur', validators: 
              Validators.required }),
    ...
    })

更新可以设置为“更改”|“模糊”|“提交”

---

在复杂和大型的形式下，这可以很容易地变成消防水带，但有几个选项可以将流量限制在可管理的范围内。

这解决了我的问题。InquiryByUserInputForm.get（'chosenName'）。值行：）感谢帮助！

this.userNameFormGroupEnquiry = new FormGroup( {
    chosenName: new FormControl('', { updateOn: 'blur', validators: 
              Validators.required }),
    ...
    })