Question

编辑2：

我为角度团队创建了一个问题，以简化表单验证。如果您想要更简单的表单验证体验，请竖起大拇指。

https://github.com/angular/angular/issues/20477

编辑1：

H.abidi的答案朝着理想的方向发展，但它只适用于材料成分。换句话说，我认为材料也认识到了这个问题，并且他们为它们的组件解决了这个问题。

原始问题：

这是没有验证CSS样式或错误消息的输入字段的示例（例如，无效时输入字段上的红色边框）：

    <input required type="date" id="Rechnungsdatum" name="Rechnungsdatum" formControlName="Rechnungsdatum">
    <label for="Rechnungsdatum">Rechnungsdatum*</label>

带有验证的类似输入字段，其中我应用CSS类，例如＆＃34;有效的有效 - 内联＆＃34;或＆＃34;无效的无效内联＆＃34;通过[ngClass]并显示错误消息，错误图标如下所示：

    <input required type="text" id="Rechnungsnummer" name="Rechnungsnummer" formControlName="Rechnungsnummer" [ngClass]="{'invalid invalid--inline': !signupForm.get('Rechnungsnummer').valid && (signupForm.get('Rechnungsnummer').touched || formDir.submitted),
    'valid valid--inline': signupForm.get('Rechnungsnummer').valid && (signupForm.get('Rechnungsnummer').touched || formDir.submitted)}">
    <label for="Rechnungsnummer">Rechnungsnummer*</label>
    <div class="message" *ngIf="!signupForm.get('Rechnungsnummer').valid && !signupForm.get('Rechnungsnummer').errors['required'] && (signupForm.get('Rechnungsnummer').touched || formDir.submitted)">
      <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
      Rechnungsnummer muss zwischen 3 und 6 Zeichen lang sein
    </div>
    <div class="message" *ngIf="signupForm.get('Rechnungsnummer').errors['required'] && (signupForm.get('Rechnungsnummer').touched || formDir.submitted)">
      <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
      Rechnungsnummer erforderlich
    </div>

代码：

!signupForm.get('Rechnungsnummer').valid && (signupForm.get('Rechnungsnummer').touched || formDir.submitted)

是重复的。是否有最佳做法使这更简洁？甚至可以根据添加的CSS类定义一些规则并显示错误消息。我有一种感觉，这是模板中的太多逻辑。

另外可以避免为每个输入指定表单控件的名称吗？例如。而不是

signupForm.get('Rechnungsnummer').valid

有类似

的内容

signupForm.currentFormControl.valid

或喜欢

<input id="1" #thisInput [ngClass]="{valid: thisInput.valid}>
<input id="2" #thisInput [ngClass]="{valid: thisInput.valid}>

Answer 1

Hello使用angular 5，您可以使用ErrorStateMatcher。

以下是使用示例：

import {Component} from '@angular/core';
import {FormControl, FormGroupDirective, NgForm, Validators} from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';

/** Error when invalid control is dirty, touched, or submitted. */
export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}

/** @title Input with a custom ErrorStateMatcher */
@Component({
  selector: 'input-error-state-matcher-example',
  templateUrl: './input-error-state-matcher-example.html',
  styleUrls: ['./input-error-state-matcher-example.css'],
})
export class InputErrorStateMatcherExample {
  emailFormControl = new FormControl('', [
    Validators.required,
    Validators.email,
  ]);

  matcher = new MyErrorStateMatcher();
}

并且在你的HTML中你使用这样的东西：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Email" [formControl]="emailFormControl"
           [errorStateMatcher]="matcher">
    <mat-hint>Errors appear instantly!</mat-hint>
    <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
      Please enter a valid email address
    </mat-error>
    <mat-error *ngIf="emailFormControl.hasError('required')">
      Email is <strong>required</strong>
    </mat-error>
  </mat-form-field>
</form>

我希望thois可以提供帮助。

Answer 2

我建议您尝试ngxErrors

<input type="text" formControlName="password">
  <div ngxErrors="password">
    <div ngxError="required" [when]="['dirty', 'touched']">
      Password is required
    </div>
    <div [ngxError]="['minlength', 'maxlength']" [when]="['dirty', 'touched']">
      5 characters minimum, 12 characters maximum
    </div>
  </div>

Answer 3

在使用ErrorStateMatcher之前，我的代码是这样的：

    <p [class.errors]="form.controls.lastname.touched && form.controls.lastname.invalid">
      <mat-input-container>
        <input id="idLastname" matInput placeholder="Nom" formControlName="lastname">
        <span *ngIf="form.controls.lastname.touched && form.controls.lastname.errors?.required">
      <br>le nom est obligatoire</span>
      </mat-input-container>
    </p>

和css类错误

.errors {
  color: red;
}

Angular 2/4/5反应形式验证 - 如何使其更简洁？

3 个答案: