Angular 我想用反应形式和角度材料一次显示一个错误

我使用角反应形式和角材料。 我的代码运行良好。 但我想一次显示一个错误

我的.html文件代码

{{validation.message}
{{validation.message}
{{validation.message}
{{validation.message}
我接受条款和条件
{{validation.message}
提交

您可以在ts文件中使用for循环来查找错误

In your .ts File

for (let c in this.account_validation_messages.controls) {
      this.account_validation_messages.controls[c].markAsTouched();
    }

删除此HTML代码并

<mat-error *ngFor="let validation of account_validation_messages.terms">
          <mat-error class="error-message" *ngIf="accountDetailsForm.get('terms').hasError(validation.type) && (accountDetailsForm.get('terms').dirty || accountDetailsForm.get('terms').touched)">{{validation.message}}</mat-error>
        </mat-error>

Replace with this:

<mat-error class="error-message" *ngIf="accountDetailsForm.get('terms').hasError(validation.type) && (accountDetailsForm.get('terms').dirty || accountDetailsForm.get('terms').touched)">{{validation.message}}</mat-error>

{{validation.message}
替换为：
{{validation.message}

请参阅以获得更好的理解

控制消息.component.ts:

import { OnInit } from '@angular/core';
import { Component, Input } from '@angular/core';
import { FormGroup, FormControl, AbstractControl } from '@angular/forms';

import { CustomValidationService } from '../custom-validation.service'

@Component({
  selector: 'app-control-message',
  templateUrl: './control-message.component.html',
  styleUrls: ['./control-message.component.css']
})
export class ControlMessageComponent implements OnInit {

  ngOnInit() {

  }
  @Input() control: FormControl;

  constructor() { }

    /**
     * This method is use to return validation errors
     */
  get errorMessage() {
    for (let propertyName in this.control.errors) {
      if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
        return CustomValidationService.getValidatorErrorMessage(this.getName(this.control), propertyName, this.control.errors[propertyName]);
      }
      if (this.control.valueChanges) {
        return CustomValidationService.showValidatorErrorMessage(propertyName, this.control.errors[propertyName])
      }
    }
    return null;
  }

    /**
     * This method used to find the control name
     * @param control - AbstractControl
     */
  private getName(control: AbstractControl): string | null {
    let group = <FormGroup>control.parent;

    if (!group) {
      return null;
    }

    let name: string;

    Object.keys(group.controls).forEach(key => {
      let childControl = group.get(key);

      if (childControl !== control) {
        return;
      }
      name = key;
    });

    return name;
  }
}

<mat-error *ngIf="errorMessage !== null">
    {{errorMessage}}
</mat-error>

<h1>Common Error Message with Custom Validation Reactive Form</h1>

<form [formGroup]="accountDetailsForm" novalidate (ngSubmit)="onSubmitAccountDetails(accountDetailsForm.value)">
    <div>
        <mat-form-field class="full-width">
            <input matInput maxlength="25" placeholder="Username" formControlName="username" required>
        </mat-form-field>
        <app-control-message [control]="accountDetailsForm.controls.username"></app-control-message>
    </div>

    <div>
        <mat-form-field class="full-width">
            <input matInput type="email" placeholder="Email" formControlName="email" required>
        </mat-form-field>
        <app-control-message [control]="accountDetailsForm.controls.email"></app-control-message>
    </div>

    <div>
        <mat-form-field class="full-width">
            <input matInput type="password" placeholder="Password" formControlName="password" required>
        </mat-form-field>
        <app-control-message [control]="accountDetailsForm.controls.password"></app-control-message>
    </div>
    <div>
        <mat-form-field>
            <input matInput type="password" placeholder="Confirm Password" formControlName="confirm_password" required>
        </mat-form-field>

        <app-control-message [control]="accountDetailsForm.controls.confirm_password"></app-control-message>
        <mat-error *ngIf="accountDetailsForm.controls.password.value != accountDetailsForm.controls.confirm_password.value">
            Password & Confrm Password Did not matched.
        </mat-error>
    </div>
    <button class="submit-btn" color="primary" mat-raised-button type="submit" [disabled]="!accountDetailsForm.valid || (accountDetailsForm.controls.confirm_password != accountDetailsForm.controls.password)">
  Submit</button>
</form>

accountDetailsForm: FormGroup;
  constructor(private fb: FormBuilder) {
  }
  ngOnInit() {
    this.createForm()
  }
  onSubmitAccountDetails(val) {
    console.log(val);
  }

  createForm() {
    this.accountDetailsForm = this.fb.group({
      username: ['', [
        Validators.maxLength(25),
        Validators.minLength(5),
        Validators.pattern('^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+$'),
        Validators.required
      ]],
      email: [null, [
        Validators.required,
        Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
      ]],
      password: [null, Validators.required],
      confirm_password: [null, Validators.required]
    })
  }

使用css 首先隐藏所有错误

mat-error {
  display: none;
}

然后仅显示每个表单字段的第一个错误：

mat-form-field mat-error:first-child {
  display: block;
}

或者，也可以只显示表单的第一个错误

form mat-error:first-child {
  display: block;
}