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

2 回答

• 0

  参考演示项目以获得更好的理解 .

  control-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;
    }
  }
  

  control-message.component.html:

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

  application-form.html:

  <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>
  

  application-form.component.ts:

  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]
      })
    }
  

  回复于 2023-11-30T06:17:24+08:00
• 0

  您可以在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>
  

  回复于 2023-11-30T06:17:24+08:00