Angular 2/4/5 reactive forms验证-如何使其更简洁？
Angular 2/4/5 reactive forms验证-如何使其更简洁？
提问于 2017-11-15 23:22:48
编辑2：
我已经为angular团队创建了一个问题，以简化表单验证。如果你想要一个更简单的表单验证体验，请竖起大拇指。
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>类似的带有验证的输入域，我通过ngClass应用诸如"valid valid--inline“或" invalid -inline”之类的CSS类，并显示错误消息和错误图标，如下所示：
<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}>回答 3
Stack Overflow用户
发布于 2017-11-16 17:47:38
您好，在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>我希望hope能帮上忙。
Stack Overflow用户
发布于 2017-11-16 22:47:16
在使用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;
}Stack Overflow用户
发布于 2018-06-09 05:00:41
我建议你试试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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47311125
复制相关文章
相似问题