Angular Форма действительна не работает

Question

Я хочу использовать "formControl", чтобы проверить, верна ли форма.

, но если в форме есть поле ввода с элементом автозаполнения, то formcontrol не работает

код следующий:

 <form  [formGroup]="form">
<input matInput type="text" [formControl]="field"  [(ngModel)]="node.field" [name]="node.id"
               [matAutocomplete]="auto" placeholder="Field"/>
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let field of fields" [value]="field.value">
            {{field.value}}
          </mat-option>
        </mat-autocomplete>
</form>

public field: FormControl = new FormControl('', Validators.required);

 this.form.get('field').valueChanges.subscribe(val => {
      if (val === '') {
        status = true;
      }
    });

каждый раз, когда я изменяю значение поля ввода, функция valueChanges не будет вызываться.

любое решение?

Answer 1

Вы не используете [(ngModel)] в сочетании с директивами реактивной формы.

Когда вы находитесь внутри [formGroup], вы можете использовать директивы formControlName, formGroupName и formArrayName - вам не нужно связываться с экземплярами FormControl, FormGroup и FormArray. Структура в HTML должна соответствовать структуре формы, которую вы строите в коде вашего компонента.

<form  [formGroup]="form">
  <input matInput type="text" formControlName="field"
      [matAutocomplete]="auto" placeholder="Field"/>
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let field of fields" [value]="field.value">
      {{field.value}}
    </mat-option>
  </mat-autocomplete>
</form>

Вам нужно только выставить root FormGroup из вашего компонента.

form: FormGroup;

ngOnInit() {
  const formControls = {
    field: new FormControl('', Validators.required)
  };

  formControls.field.valueChanges.subscribe(() => {
    const value = formControls.field.value;
    // TODO: perform action based on value
  });

  this.form = this.formBuilder.group(formControls);  
}