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

Question

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

在我的项目中，我为 UI 使用 Angular Material design。

我想做的是

• 如果用户点击保存按钮，显示一条错误消息，如“请输入您的 FName”。
• 如果用户触摸但未输入任何内容并点击保存按钮，则显示一条错误消息，如“请输入您的 FName”。
• 如果用户开始输入字符，它应该显示一条错误消息，如“需要至少 4 个字符”
• 一旦用户达到 15 个字符，它应该显示一条错误消息，如 “仅最多 20 个字符”
• 如果用户输入任何特殊的字符和空格以及其他输入错误消息如“只输入字母”

现在，当输入不满足成功验证时，它会变为红色。但我想在 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]+')]]
    });

  }
}

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

谁能帮我解决这个问题。

Answer 1

试试这个:

<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供您引用。