Angular 6 не рекомендуется использовать formControlName и ngModel вместе

Question

У меня угловой 6 проект.И я использовал ngModel и formControlName вместе.Но угловой дал мне предупреждение ниже.Forexamle, когда я открываю всплывающее окно обновления из кнопки в сетке, я могу легко связать входные данные в всплывающем окне обновления автоматически.Но угловой 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

Лучший способ - использовать ReactiveForms с formGroup и formControlName.Если вы хотите сделать это автоматически, возможно, вы сможете проанализировать ваш объект и для каждого элемента вы создадите новый параметр, используя ключ элемента.Затем вы можете соединить formGroup с вашим объектом.

Answer 2

Нет необходимости использовать оба (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 3

Наличие ngModel с formGroup действительно странно.Вы должны удалить ngModel и вместо этого связать valueChanges с fromGroup, а затем просто перебрать полученные данные и присвоить значения.

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

Вы просто выбираете либо ngModel, что означает, что вы используете управляемую шаблоном форму, либо formControlName, что означает, что вы используете реактивную форму.https://angular.io/guide/reactive-forms Если вы хотите простую форму, просто удалите formControlName в каждом входе.Если вы хотите сделать больше в форме, вы можете использовать реактивную форму, удалив ngModel и добавив атрибут name, например name=nameSurname