如何在Angular 6中根据用户输入显示不同的错误消息-Java 学习之路

我是角度6的新手，在这里我想验证用户输入字段并根据给定的输入显示不同的错误消息 .

在我的项目中，我使用Angular Material设计UI .

我想做的是

如果用户单击保存按钮，则会显示错误消息 "Please enter your FName".
如果用户触摸但没有输入任何内容并单击保存按钮会显示错误消息 "Please enter your FName".
如果用户开始输入char，则应显示错误消息 "minimum 4 char required"
一旦用户达到15个字符，它应该显示一条错误消息 "Maximum 20 char only"
如果用户输入任何特殊的字符和空格，并输入其他错误信息，请输入 "Enter only alphabets"

现在，当输入不符合成功验证时，它会变为RED颜色 . 但我想在formControl中为每个验证显示错误消息 .

这里我有一个mat-input-field .

<form [formGroup]="userAddressValidations" novalidate>
    <mat-form-field appearance="outline" class="col-sm-6">
        <mat-label>First Name</mat-label>
        <input matInput formControlName="firstName">
    </mat-form-field>
</form>

<button mat-raised-button class="continueBtnHeight" color="warn">
<span>Save</span>
</button>

Ts文件

export class ButtonToggleOverviewExample {
  userAddressValidations: FormGroup;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.userAddressValidations = this.formBuilder.group({
      firstName: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(20), Validators.pattern('[a-zA-Z]+')]]
    });

  }
}

stackblitz：https://stackblitz.com/edit/angular-t1k1x6-skowwq?file=app%2Fbutton-toggle-overview-example.ts

任何人都可以帮我解决这个问题 .

3 回答

试试这个：

<form class="example-form" [formGroup]="userAddressValidations">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="First Name" formControlName="firstName">
    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('required')">
      First Name is Required!
    </mat-error>
    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('minlength')">
      First Name should be atleast 4 characters long!
    </mat-error>

    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('maxlength')">
      First Name can be atmax n characters long!
    </mat-error>

    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('pattern')">
      First Name must follow this pattern!
    </mat-error>
  </mat-form-field>

</form>

这是你的参考Sample StackBlitz .

回复于 2024-04-29T17:46:51+08:00

如果用户输入任何特殊字符和空格，请使用 hasError('invalidName')

Stackblitz

Component.html

<form [formGroup]="userAddressValidations">

    <label>User Name : 
        <input type="text"  formControlName="firstName">
    </label><br>

    <div class="errors" *ngIf="userAddressValidations.get('firstName').invalid && (userAddressValidations.get('firstName').touched || userAddressValidations.get('firstName').dirty)">

        <div *ngIf="userAddressValidations.get('firstName').hasError('required')">
            Please enter your FName
        </div>

        <div *ngIf="userAddressValidations.get('firstName').errors.minlength">
            minimum 4 char required
        </div>

        <div *ngIf="userAddressValidations.get('firstName').errors.maxlength">
            Maximum 20 char only
        </div>

        <div class="error-text" *ngIf="userAddressValidations.get('firstName').hasError('invalidName')">
            Enter only alphabets
        </div>
    </div>

</form>

Component.ts

this.userAddressValidations = fb.group({
      firstName: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(20), usernameValidator]]
});

username.validators.ts

import { AbstractControl, ValidationErrors } from "@angular/forms"

export const usernameValidator = function (control: AbstractControl): ValidationErrors | null {

  let value: string = control.value || '';

  if (value) {
    const matches = value.match(/^[a-zA-Z]+$/);
    return matches ? null : { 'invalidName': true };
  } else {
    return null;
  }
}

回复于 2024-04-29T17:46:51+08:00

看一下这个教程https://codecraft.tv/courses/angular/forms/model-driven-validation，你也可以参考这个stackoverflow问题：Display custom validator error with mat-error

但这是一个小例子：

<form [formGroup]="userAddressValidations" novalidate>
    <mat-form-field appearance="outline" class="col-sm-6">
        <mat-label>First Name</mat-label>
        <input matInput formControlName="firstName">
         <mat-error *ngIf="email.errors.required">{{getErrorMessage()}}</mat-error>
         <mat-error *ngIf="email.errors.minlength">{{getErrorMessage()}}</mat-error>
    </mat-form-field>
</form>

回复于 2024-04-29T17:46:51+08:00

如何在Angular 6中根据用户输入显示不同的错误消息

3 回答

相关问题