Ошибки Angular 5 FormBuilder не определены при неправильном вводе

Question

[Как новичок пытался поместить это в plnkr, но не смог; проблемы с добавлением @ angular / форм в json.]

Цель: сгладить то, что мне нужно знать, чтобы выполнять всю мою работу в FormBuilder HTML:

  <input type="text"
         formControlName="bucket"
         value="A"
         [(ngModel)]="AllData.bucket" />

  // added to button  to test: [disabled]="this.myTestForm.invalid || this.myTestForm.pristine"
  <div><button
               type="submit">submit</button></div>
</form>

<div *ngIf="result.length > 0 ">{{result}}</div>
<div *ngIf="myTestForm.errors === true ">ERRORS FOUND</div>

Запуск приложения: показывает, что formbuilder в ts ниже правильно инициализирует поле ввода, и, если я добавлю приведенное выше выражение [disabled], оно корректно отключает кнопку.

Вот тс: import {Component, OnInit} из '@ angular / core'; import {Validators, FormBuilder, FormGroup} из '@ angular / forms';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  myTestForm: FormGroup;
  result: string;
  AllData = {    //// wired to ngModel
    bucket: '12'
  }

  constructor(private fb: FormBuilder) {
    this.result = '';
  }

  ngOnInit() {
    this.myTestForm = this.fb.group({
      bucket: ['starting value', [Validators.required, Validators.minLength(5)]]  
<-- ngModel bucket above overrides this init value as expected -->

    });
  }

  onSubmit(value: any) { // ways to show results
    this.result = this.AllData.bucket;
    // OR //
    this.result = this.myTestForm.controls['bucket'].value;
    // OR //
    this.result = this.myTestForm.get('bucket').value;
  }
}

Приложение начинается с «12» в поле ввода, как и ожидалось. Независимо от того, что я помещаю в текстовое поле перед нажатием кнопки «Отправить», devTools всегда показывает свойство «error» myTestForm как неопределенное.

Я ожидаю, что у ошибок будут какие-то строки в зависимости от типа возникающей ошибки.

Далее, я искал в Интернете способы захвата недопустимых полей, как только возникает ошибка (конечно, для! Нетронутых полей), но я не мог заставить что-либо работать.

Любая помощь будет высоко ценится.

Заранее спасибо, Чак

Answer 1

Я создал небольшую демоверсию , чтобы предложить вам ваш подход

1. Не используйте [(ngModel)] при использовании подхода реактивных форм, так как ngModel будет иметь приоритет над formControl и установит его значение для элемента управления независимо от значения formcontrol's, которое вы инициализировали .

   <form [formGroup]="myTestForm" >
   <input type="text"
        formControlName="bucket"
        value="A" />
   <div><button 
              [disabled]="myTestForm.invalid || myTestForm.pristine"
              type="submit" >submit</button></div>
   </form>
   

2. Чтобы проверить ошибки формы, используйте hasError() на controls

   <div *ngIf="myTestForm.get('bucket').hasError('required')">Input is required</div>
   
   <div *ngIf="myTestForm.get('bucket').hasError('minlength')">Min length should be 5</div>