Проверка угловых реактивных форм не работает

Question

Я пытаюсь выяснить, почему эта проверка имени не работает в формах Angular Reactive. Имя должно быть не менее 5 символов. Вот код ниже,

Stackblitz

HTML:

<div>
    <h3>Angular Reactive Form Validation</h3>
    <form [formGroup]="registerForm">
        <div class="form-group">
            <label>First Name</label>
            <input type="text" formControlName="firstName" class="form-control"  />
        <div *ngIf="f.firstName.errors" class="invalid-feedback">
            Need Valid first Name less than 5 characters </div>
            <button class="btn btn-primary">Register</button>
        </div>
    </form>
</div>

Машинопись:

export class AppComponent implements OnInit {
    registerForm: FormGroup;
    submitted = false;

    constructor(private formBuilder: FormBuilder) { }

    ngOnInit() {
        this.registerForm = this.formBuilder.group({
            firstName: ['', [Validators.required, Validators.maxLength(3)]]
        });
    }


}

Answer 1

В вашем коде есть несколько проблем:

1) Вы не определили f getter:

get f() {
  return this.registerForm.controls;
}

2) Поскольку вы используете загрузочную среду CSSчтобы показать ошибки проверки, вы должны установить is-invalid класс на вашем элементе управления вводом при возникновении ошибки:

<input type="text" formControlName="firstName" 
     class="form-control"
     [class.is-invalid]="f.firstName.errors"/>

Forked Stackblitz

Answer 2

Здесь работает Пример

Вы пропустили

get f () {return this.registerForm.controls;}

и

[Требуется Validators.minLength (5), Validators.maxLength (5)]

ngOnInit() {
        this.registerForm = this.formBuilder.group({
            firstName: ['', [Validators.required, Validators.minLength(5),Validators.maxLength(5)]]
        });
    }


get f() { return this.registerForm.controls; }

Answer 3

Измените условие вашего шаблона на:

<div *ngIf="registerForm.controls['firstName'].touched 
            && registerForm.controls['firstName'].invalid">
    Need Valid first Name less than 5 characters 
</div>