一起使用formControlName和ngModel的angular 6弃用 [英] angular 6 deprecation of using formControlName and ngModel together

问题描述

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

I have angular 6 project. And I was using ngModel and formControlName together. But angular gave me warning in below. Forexamle when I open update popup from button in grid, I can easily bind inputs in update popup automatically. But angular 7 says that remove ngModel. So, I must always map everything to my student object. What is the best way for this? Can we give formValueType to form value like studentObject in below code and then can it bind automatically?

角度警告:

     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>

推荐答案

具有 formGroup 的 ngModel 确实很奇怪.您应该删除 ngModel ，然后绑定到fromGroup的 valueChanges 上，然后仅遍历接收到的数据并分配值.

Having ngModel with formGroup is really odd. You should remove ngModel and instead bind on valueChanges on fromGroup and then just iterate through received data and assign values.

 //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
    }
}

这篇关于一起使用formControlName和ngModel的angular 6弃用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！