File
Implements
Metadata
| selector |
app-validation |
| styleUrls |
./validation.component.scss |
| templateUrl |
./validation.component.html |
Methods
|
onValueChanged
|
onValueChanged(data?: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| data |
any
|
Yes
|
|
|
rebuildForm
|
rebuildForm()
|
|
|
|
|
|
formErrors
|
Type : object
|
Default value : {
username: '',
email: '',
password: ''
}
|
|
|
|
hide
|
Default value : true
|
|
|
|
validationMessages
|
Type : object
|
Default value : {
username: {
required: '',
minlength: '请输入大于4个字符',
maxlength: '请输入小于32个字符'
},
email: {
required: '',
email: '请输入正确的邮箱'
},
password: {
required: '',
pattern: '密码中必须包含数字和字母',
minlength: '请输入大于4个字符',
maxlength: '请输入小于25个字符'
}
}
|
|
|
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-validation',
templateUrl: './validation.component.html',
styleUrls: ['./validation.component.scss']
})
export class ValidationComponent implements OnInit {
hide = true;
registerFrom: FormGroup;
formErrors = {
username: '',
email: '',
password: ''
};
validationMessages = {
username: {
required: '',
minlength: '请输入大于4个字符',
maxlength: '请输入小于32个字符'
},
email: {
required: '',
email: '请输入正确的邮箱'
},
password: {
required: '',
pattern: '密码中必须包含数字和字母',
minlength: '请输入大于4个字符',
maxlength: '请输入小于25个字符'
}
};
constructor(private fb: FormBuilder) {
this.createForm();
}
ngOnInit() {}
createForm() {
this.registerFrom = this.fb.group({
username: ['', [Validators.maxLength(32)]],
email: ['', [Validators.required, Validators.email]],
password: [
'',
[
Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
Validators.minLength(6),
Validators.maxLength(16)
]
],
password_confirm: '',
phone: '',
agree: ''
});
this.registerFrom.valueChanges.subscribe(data => this.onValueChanged(data));
this.onValueChanged();
}
rebuildForm() {
this.registerFrom.reset({
username: 'stbui'
});
}
onSubmit() {
console.log(this.registerFrom.value);
}
onValueChanged(data?: any) {
if (!this.registerFrom) {
return;
}
const form = this.registerFrom;
for (const field in this.formErrors) {
if (Object.prototype.hasOwnProperty.call(this.formErrors, field)) {
this.formErrors[field] = '';
const control = form.get(field);
if (control && control.dirty && !control.valid) {
const messages = this.validationMessages[field];
for (const key in control.errors) {
if (Object.prototype.hasOwnProperty.call(control.errors, key)) {
this.formErrors[field] += messages[key] + ' ';
}
}
}
}
}
}
}
<div fxLayout="row wrap" fxLayoutGap="24px grid">
<div fxFlex.lt-md="50" fxFlex.lt-sm="100">
<mat-card>
<mat-card-title>注册</mat-card-title>
<mat-card-content>
<form [formGroup]="registerFrom" (ngSubmit)="onSubmit()">
<mat-form-field class="display-block">
<input matInput placeholder="请输入您的用户名" formControlName="username" required minlength="4" maxlength="10">
<mat-error *ngIf="formErrors.username">{{formErrors.username}}</mat-error>
</mat-form-field>
<mat-form-field class="display-block">
<input matInput placeholder="请输入您的邮箱" formControlName="email" required>
<mat-error *ngIf="formErrors.email">{{formErrors.email}}</mat-error>
</mat-form-field>
<mat-form-field class="display-block">
<input matInput placeholder="请输入您的密码" formControlName="password" [type]="hide ? 'password' : 'text'"
required>
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
</mat-form-field>
<mat-form-field class="display-block">
<input matInput placeholder="请再次输入您的密码" formControlName="password_confirm" required>
</mat-form-field>
<mat-form-field class="display-block">
<input matInput placeholder="请输入您的手机" formControlName="phone" minlength="11" maxlength="11">
<mat-hint align="end">{{registerFrom.value.phone?.length || 0}}/11</mat-hint>
</mat-form-field>
<mat-checkbox class="form-check" formControlName="agree">我同意</mat-checkbox>
<button mat-raised-button color="primary" type="submit" [disabled]="!registerFrom.valid">提交</button>
<button mat-raised-button color="default" type="button" (click)="rebuildForm()">清空</button>
</form>
<p>{{registerFrom.value | json}}</p>
</mat-card-content>
</mat-card>
</div>
<div fxFlex.lt-md="50" fxFlex.lt-sm="100">
<mat-card>
<mat-card-title>联系方式</mat-card-title>
<mat-card-content>
<form #formContact="ngForm">
<mat-form-field class="display-block">
<input matInput placeholder="您的名字" name="name" ngModel required minlength="4" maxlength="10">
</mat-form-field>
<mat-form-field class="display-block">
<input matInput placeholder="您的邮箱" name="email" ngModel required>
</mat-form-field>
<mat-form-field class="display-block">
<input matInput placeholder="请您的网址" name="website ngModel" required>
</mat-form-field>
<mat-form-field class="display-block">
<textarea matInput placeholder="留言" rows="3" name="message" ngModel required></textarea>
</mat-form-field>
<mat-checkbox class="form-check">我同意</mat-checkbox>
<button mat-raised-button color="primary" type="submit" [disabled]="!formContact.valid">提交</button>
</form>
</mat-card-content>
</mat-card>
</div>
</div>
:host {
display: block;
padding: 15px;
}
.form-check {
display: block;
margin: 16px 0 32px;
}
.display-block {
display: block;
}
Legend
Html element with directive