我是angular 6的新手,在这里我要验证用户输入字段并根据给定的输入显示不同的错误消息。
在我的项目中,我使用Angular Material设计UI。
我想做的是
现在,当输入不符合成功验证时,它会变为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
任何人都可以帮我解决这个问题。
试试这个:
<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。
如果用户输入任何特殊字符和空格,请使用hasError('invalidName')
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;
}
}
看看这个教程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>