Проверить количество ошибок Angular Reactive Forms

Я хочу условно применить класс css, если количество ошибок в форме больше 1. Как мне это сделать в angular4?

Составная часть:

import { Component } from "@angular/core";
import { FormGroup, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';

@Component({
    ...
})

export class RegisterComponent {
  complexForm : FormGroup;

  constructor(fb: FormBuilder){
    this.complexForm = fb.group({
      'emailAddress' : [null, Validators.email],
      'firstName': [null, Validators.compose([Validators.required, Validators.minLength(2)])],
      ...
    })
  }

  submitForm(value: any){
    console.log(value);
  }
}

Шаблон:

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
      <section class="form-block">
          <div class="form-group" [ngClass]="{'has-error':!complexForm.controls['emailAddress'].valid && complexForm.controls['emailAddress'].touched}">
                <label for="formFields_1">Email Address</label>
                <input [formControl]="complexForm.controls['emailAddress']" type="text" spellcheck="false" id="formFields_1" placeholder="" size="35">
                <span *ngIf="complexForm.controls['emailAddress'].hasError('email') && complexForm.controls['emailAddress'].touched" class="tooltip-content">
                    Please enter a valid email address (ex. [email protected])
                </span>
          </div>   
          <div class="form-group" [ngClass]="{'has-error':!complexForm.controls['firstName'].valid && complexForm.controls['firstName'].touched}">
              <label for="formFields_2">First Name</label>
                <input [formControl]="complexForm.controls['firstName']" type="text" spellcheck="false" id="formFields_2" placeholder="" size="35">
                <span *ngIf="complexForm.controls['firstName'].hasError('required') && complexForm.controls['firstName'].touched" class="tooltip-content">
                    Your first name must contain at least one letter
                </span>
          </div>
     </section>
</form>

Если я хочу применить класс form-error к <form>, если количество ошибок формы больше 1, как мне это сделать? Спасибо за ваши идеи.


error-handling angular templates angular-forms
person Nick B    schedule 26.06.2017    source источник

Ответы (2)


arrow_upward
7
arrow_downward

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

Что-то вроде этого:

getErrorCount(container: FormGroup): number {
    let errorCount = 0;
    for (let controlKey in container.controls) {
        if (container.controls.hasOwnProperty(controlKey)) {
            if (container.controls[controlKey].errors) {
                errorCount += Object.keys(container.controls[controlKey].errors).length;
                console.log(errorCount);
            }
        }
    }
    return errorCount;
}
person DeborahK    schedule 26.06.2017

arrow_upward
2
arrow_downward

Для этого есть лучшее решение.

Object.keys(formGroup.errors).length

Это вернет нам общее количество ошибок в formGroup.

person Vikrant Parab    schedule 17.11.2020
comment
Это не сработало для меня. - person michael.k; 09.06.2021