angular 6 弃用 formControlName 和 ngModel 一起使用

Question

我有 angular 6 项目。我同时使用了 ngModel 和 formControlName。但是 angular 在下面给了我警告。例如，当我从网格中的按钮打开更新弹出窗口时，我可以轻松地自动绑定更新弹出窗口中的输入。但是 angular 7 说删除 ngModel。因此，我必须始终将所有内容映射到我的学生对象。最好的方法是什么？我们可以在下面的代码中给 formValueType 像 studentObject 这样的表单值，然后它可以自动绑定吗？

角度警告：

     It looks like you're using ngModel on the same form field 
as formControlName. Support for using the ngModel input property and 
ngModelChange event with reactive form directives has been deprecated
 in Angular v6 and will be removed in Angular v7.

我的HTML

<form [formGroup]="studentForm" ??????formValueType="studentObject"?????>
  <p-dialog>
    <div class="ui-g-12 form-group">
      <div class="ui-g-4">
        <label>Name Surname</label>
      </div>
      <div class="ui-g-8">
        <input pInputText [(ngModel)]="selectedStudent.nameSurname"  formControlName="nameSurname" />
      </div>
    </div>
    <div class="ui-g-12 form-group">
      <div class="ui-g-4">
        <label>Email</label>
      </div>
      <div class="ui-g-8">
        <input pInputText [(ngModel)]="selectedStudent.email" formControlName="email" />
      </div>
    </div>
        <div class="ui-g-12 form-group">
          <div class="ui-g-4">
            <label>Age</label>
          </div>
          <div class="ui-g-8">
            <input pInputText [(ngModel)]="selectedStudent.age"  formControlName="age" />
          </div>
        </div>
      </div>
    <button type="button" pButton icon="fa fa-check" (click)="save()" label="Save"></button>
  </p-dialog>
</form>

Answer 1

有ngModel与formGroup实在是奇怪。您应该删除ngModel并绑定在valueChangesfromGroup 上，然后遍历接收到的数据并分配值。

 //somewhere where form is build
 this.studentForm.valueChanges.subscribe(data => this.onStudentFormValueChange(data));

 private onStudentFormValueChange(data) {
    this.selectedStudent.age = data.age
    this.selectedStudent.email = data.email
    this.selectedStudent.nameSurname = data.nameSurname

    // or
    for (const key in this.studentForm.controls) {
       const control = this.studentForm.get(key);
       this.selectedStudent[key] = control.value
    }
}

Answer 2

您只需选择 ngModel 表示您正在使用模板驱动表单，或选择 formControlName 表示您正在使用反应式表单。 https://angular.io/guide/reactive-forms 如果您想要一个简单的表单，只需在每个输入中删除 formControlName 即可。如果您想在表单中执行更多操作，可以通过删除 ngModel 并添加 name 属性来使用反应式表单，例如name=nameSurname