Удаление ngModel из компонента

Question

У меня есть некоторые компоненты, созданные для моего приложения Angular, и после обновления моего проекта до версии 6 Angular я получил сообщение, которое меня беспокоит.

Похоже, вы используете ngModelв том же поле формы, что и formControl.Поддержка использования свойства ввода ngModel и события ngModelChange с директивами реактивной формы устарела в Angular v6 и будет удалена в Angular v7.

For more information on this, see our API docs here:
https://angular.io/api/forms/FormControlDirective#use-with-ngmodel

Это связано с моим следующим компонентом:

<input type="text" id="{{id}}" name="{{name}}" [formControl]="ctrl" [(ngModel)]="value" appPfMaskCpf="999.999.999-99" placeholder="{{placeholder}}"
  class="form-control">

<div *ngIf="flagCpfInvalido && value.length > 0">
  <small class="text-danger">
    CPF inválido.
  </small>
  <br>
</div>

Это очень просто, он получает входные данные, и я проверяю значение.

Как я могу отменить использование ngModel в этом случае?

Answer 1

Вы не должны использовать ngModel, который является частью управляемой шаблоном формы внутри Реактивной формы.

Вместо установки значений с помощью ngModel вы можете установить значениеиспользуя formControlName: Пример:

<form [formGroup]="form">
   <input formControlName="first">
</form>

Установите это значение в компоненте: this.form.get('first').setValue('some value');

Или вы можете отключить предупреждение консоли на данный момент:

imports: [
   ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
 ]

Чтобы обновить код до v7, вам нужно решить, придерживаться ли директивы реактивной формы (и получать / устанавливать значения, используя шаблоны реактивной формы), или переключиться на директивы, управляемые шаблоном.

Более подробная информация доступна в документации