this.signupForm = this.fb.group({
userName: ['', [Validators.required, Validators.minLength(3)]],
email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+_]+@[a-z0-9.-]+')]]
});
myControl.setValidators(Validators.required); myControl.setValidators([Validators.required, Validators.maxLength(6)]); myControl.clearValidators(); myControl.updateValueAndValidity();
function myCustomValidator(c: AbstractControl):
{[key: string]: boolean} | null {
if(somethingIsWrong) {
return { 'myvalidator': true};
}
return null;
}
function myCustomValidator(param: any): ValidatorFn {
return (c: AbstractControl): {[key: string]: boolean} | null {
if(somethingIsWrong) {
return { 'myvalidator': true};
}
return null;
}
}
function emailMatcher(c: AbstractControl) {
let emailControl = c.get('email');
let confirmControl = c.get('confirmEmail');
if (emailControl.pristine || confirmControl.pristine) {
return null;
}
return emailControl.value === confirmControl.value ? null : { 'match': true };
}
ngOnInit(): void {
this.signupForm = this.fb.group({
userName: ['', [Validators.required, Validators.minLength(6)]],
emailGroup: this.fb.group({
email: ['', [Validators.required, Validators.email]],
confirmEmail: ['', [Validators.required]],
}, { validator: emailMatcher })
});
<div class="form-group">
<div class="col-md-offset-1 col-md-8 checkbox">
开启手机登录
<label>
<input type="radio" value="1"
formControlName="enableMobile">
是
</label>
<label>
<input type="radio" value="0"
formControlName="enableMobile">
否
</label>
</div>
</div>
<div class="form-group"
[ngClass]="{'has-error': (mobile.touched || mobile.dirty) && !mobile.valid }">
<label class="col-md-2 control-label"
for="mobileId">手机号码</label>
<div class="col-md-8">
<input class="form-control"
id="mobileId"
type="text"
placeholder="请输入手机号码"
formControlName="mobile"/>
<span class="help-block" *ngIf="(mobile.touched || mobile.dirty)
&& mobile.errors">
<span *ngIf="mobile.errors.required">
请输入手机号码
</span>
<span *ngIf="mobile.errors.minlength">
手机号码格式不正确
</span>
</span>
</div>
</div>
ngOnInit(): void {
...
this.signupForm.get('enableMobile').valueChanges
.subscribe(value => this.checkMobile(value));
}
checkMobile(enableMobile: string): void {
const mobileControl = this.signupForm.get('mobile');
enableMobile === "1" ?
mobileControl.setValidators([Validators.required,
Validators.pattern('1(3|4|5|7|8)\\d{9}')]) :
mobileControl.clearValidators();
mobileControl.updateValueAndValidity();
}
<div class="form-group"
[ngClass]="{'has-error': (age.touched || age.dirty) && !age.valid }">
<label class="col-md-2 control-label"
for="ageId">年龄</label>
<div class="col-md-8">
<input class="form-control"
id="ageId"
type="number"
placeholder="请输入年龄"
formControlName="age"/>
<span class="help-block" *ngIf="(age.touched || age.dirty) && age.errors">
<span *ngIf="age.errors.range">
输入年龄不合法
</span>
</span>
</div>
</div>
function myCustomValidator(c: AbstractControl):
{[key: string]: boolean} | null {
if(somethingIsWrong) {
return { 'myvalidator': true};
}
return null;
}
function ageValidator(c: AbstractControl): { [key: string]: any } | null {
let age = c.value;
if (age && (isNaN(age) || age < 20 || age > 120)) {
return { 'range': true, min: 20, max: 120 };
}
return null;
}
ngOnInit(): void {
this.signupForm = this.fb.group({
// ...
age: ['', ageValidator]
});
}
function myCustomValidator(param: any): ValidatorFn {
return (c: AbstractControl): {[key: string]: boolean} | null {
if(somethingIsWrong) {
return { 'myvalidator': true};
}
return null;
}
}
function ageRange(min: number, max: number): ValidatorFn {
return (c: AbstractControl): { [key: string]: any } | null => {
let age = c.value;
if (age && (isNaN(age) || age < min || age > max)) {
return { 'range': true, min: min, max: max };
}
return null;
}
}
ngOnInit(): void {
this.signupForm = this.fb.group({
// ...
age: ['', ageRange(20, 120)]
});
}
<label class="col-md-2 control-label"
for="emailId">确认邮箱</label>
<div class="col-md-8">
<input class="form-control"
id="confirmEmailId"
type="email"
placeholder="请再次输入邮箱地址"
formControlName="confirmEmail"/>
<span class="help-block" *ngIf="(confirmEmail.touched ||
confirmEmail.dirty)">
<span *ngIf="confirmEmail.errors?.required">
请输入邮箱地址
</span>
<span *ngIf="!confirmEmail.errors?.required &&
emailGroup.errors?.match">
两次输入的邮箱地址不一致
</span>
</span>
</div>
function emailMatcher(c: AbstractControl) {
let emailControl = c.get('email');
let confirmControl = c.get('confirmEmail');
if (emailControl.pristine || confirmControl.pristine) {
return null;
}
return emailControl.value === confirmControl.value ? null : { 'match': true };
}
ngOnInit(): void {
this.signupForm = this.fb.group({
userName: ['', [Validators.required, Validators.minLength(6)]],
emailGroup: this.fb.group({
email: ['', [Validators.required, Validators.email]],
confirmEmail: ['', [Validators.required]],
}, { validator: emailMatcher }),
// ...
});
<div class="form-group"
formGroupName="emailGroup"
[ngClass]="{'has-error': emailGroup.errors }">
<label class="col-md-2 control-label"
for="emailId">邮箱</label>
<div class="col-md-8">
<input class="form-control"
id="emailId"
type="email"
placeholder="请输入邮箱地址"
formControlName="email"/>
<span class="help-block" *ngIf="(email.touched || email.dirty) &&
email.errors">
<span *ngIf="email.errors.required">
请输入邮箱地址
</span>
<span *ngIf="!email.errors.required && email.errors.email">
请输入有效的邮箱地址
</span>
</span>
</div>
<!--其余部分:请参考"新增email控件"的内容-->
</div>
this.signupForm = this.fb.group({
userName: ['', [Validators.required, Validators.minLength(6)]],
emailGroup: this.fb.group({
email: ['', [Validators.required, Validators.email]],
confirmEmail: ['', [Validators.required]],
}, { validator: emailMatcher })
<div class="form-group" formGroupName="emailGroup"
[ngClass]="{'has-error': emailGroup.errors }">
<span *ngIf="!confirmEmail.errors?.required && emailGroup.errors?.match"> 两次输入的邮箱地址不一致 </span>
export class AppComponent {
constructor(private fb: FormBuilder) {
this.form = fb.group({
name: 'semlinker',
age: 31
});
this.form.valueChanges.subscribe(data => {
console.log('Form changes', data)
});
}
}
<form #myForm="ngForm" (ngSubmit)="onSubmit()"> <input type="text" name="name" class="form-control" required [(ngModel)]="user.name"> <input type="number" name="age" class="form-control" required [(ngModel)]="user.age"> </form>
class AppComponent implements AfterViewInit {
@ViewChild('myForm') form;
ngAfterViewInit() {
this.form.control.valueChanges
.debounceTime(500)
.subscribe(values => this.doSomething(values));
}
}
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有