将formControlName和ngModel一起使用的角度6弃用

Question

我有角度6项目。 我一起使用ngModel和formControlName。 但是角度在下面给了我警告。 例如，当我从网格中的按钮打开更新弹出窗口时，我可以轻松地自动绑定更新弹出窗口中的输入。 但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.

MYHTML

<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 ，而是绑定ngModel上的valueChanges ，然后迭代接收的数据并分配值。

 //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=nameSurname来使用反应形式

Answer 3

不需要同时使用（ngModel和formControlName）

更新时，您可以使用反应形式

 patchValue(value: {...}, options: {...}): void

https://angular.io/api/forms/FormGroup

对于您的情况，您将需要类似的东西

this.studentForm.patchValue({
  nameSurname : 'Some Name',
  email : 'example@email.com,
  age : '24'
})

这会将值预填充到表单中，您可以轻松地使用相同的表单进行更新

Answer 4

最好的方法是将ReactiveForms与formGroup和formControlName一起使用。 如果你想让它自动化，也许你可以解析你的对象，你可以使用元素键为每个元素创建一个新参数。 然后，您可以使用您的对象修补formGroup。