Angular:表单设置动态校验规则(ngZorro示例)
背景
有时我们需要根据不同的条件,决定表单控件是否是必填的。
代码示例
HTML文件
<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-label [nzSpan]="4" nzRequired nzFor="name">Name</nz-form-label>
<nz-form-control [nzSpan]="8" nzErrorTip="Please input your name">
<input type="text" nz-input formControlName="name" placeholder="Please input your name" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4" nzFor="nickname" [nzRequired]="validateForm.get('required')?.value">Nickname</nz-form-label>
<nz-form-control [nzSpan]="8" nzErrorTip="Please input your nickname">
<input type="text" nz-input formControlName="nickname" placeholder="Please input your nickname" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzSpan]="8" [nzOffset]="4">
<label nz-checkbox formControlName="required" (ngModelChange)="requiredChange($event)">Nickname is required</label>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzSpan]="8" [nzOffset]="4">
<button nz-button nzType="primary">Check</button>
</nz-form-control>
</nz-form-item>
</form>
TS文件
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-rule-validation',
templateUrl: './rule-validation.component.html',
styleUrls: ['./rule-validation.component.css']
})
export class RuleValidationComponent implements OnInit {
validateForm!: FormGroup;
submitForm(): void {
for (const i in this.validateForm.controls) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
}
requiredChange(required: boolean): void {
if (!required) {
this.validateForm.get('nickname')!.clearValidators();
this.validateForm.get('nickname')!.markAsPristine();
} else {
this.validateForm.get('nickname')!.setValidators(Validators.required);
this.validateForm.get('nickname')!.markAsDirty();
}
this.validateForm.get('nickname')!.updateValueAndValidity();
}
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.validateForm = this.fb.group({
name: [null, [Validators.required]],
nickname: [null],
required: [false]
});
}
}
module文件
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RuleValidationComponent } from './rule-validation.component';
import { NzFormModule } from 'ng-zorro-antd/form';
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzButtonModule } from 'ng-zorro-antd/button';
import {NzCheckboxModule} from "ng-zorro-antd/checkbox";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
@NgModule({
imports: [
CommonModule,
NzFormModule,
FormsModule,
ReactiveFormsModule,
NzInputModule,
NzButtonModule,
NzCheckboxModule,
BrowserAnimationsModule
],
declarations: [RuleValidationComponent],
exports:[RuleValidationComponent]
})
export class RuleValidationModule { }
效果图
参考链接
https://ng.ant.design/version/11.4.x/components/form/zh#components-form-demo-dynamic-rule
学以致用,知行合一