TS：
import {FormBuilder, FormGroup} from '@angular/forms';
import {MyValidators} from '../../../widget/my-validators/my-validators.widget'; // 引入验证规则文件
validateForm!: FormGroup;
constructor(
private fb: FormBuilder
）{
// 初始化数据
const { required, maxLength, minLength, idCard, mobile } = MyValidators; // 引用验证规则
this.validateForm = this.fb.group({
topPartyName: ['', [required]],
partyName: ['', [required]],
mechanismType: ['', [required]]
cardId: ['', [idCard]], // idCard是验证规则
phoneNum: ['', [required, mobile]],
manageType: [0]
});
// 或者这样初始化
ngOnInit() {
this.initForm()
}
initForm() {
this.validateForm = this.fb.group({
activityName: [{ value: null, disabled: this.defaultDisabled }, [required]], // 姓名
activityTime: [{ value: null, disabled: this.defaultDisabled }, [required]], // 活动起止时间
personPhone: [{ value: null, disabled: this.defaultDisabled }, [required, mobile]], // 手机号
}
// 数据回显 form.patchValue()
function（data） {
this.validateForm.patchValue({
activityName: data.ActivityName, // 姓名
activityTime: [data.StartTimeText, data.EndTimeText], // 活动起止时间
personPhone: data.ContactPhone, // 手机号
activityType: String(data.ActivityType), // 活动分类
}
}
// 单独设置某个值 form.patchValue
this.validateForm.patchValue({
activityType: ele.value
}）
// 清空某个值
fun() {
this.validateForm.patchValue({
joinGroup: null
// joinGroup: '',
})
}
// 提交表单的时候
submit() {
// 验证表单
this.formValidate()；
if (!this.validateForm.valid) {
return；
}
// 将表单赋值给其他对象
this.formDate = this.validateForm.value；
}
// 验证
formValidate() {
Object.keys(this.validateForm.controls).map(item => {
this.validateForm.controls[item].markAsDirty();
this.validateForm.controls[item].updateValueAndValidity();
})
}
HTML
<form nz-form [formGroup]="validateForm">
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="12">
<nz-form-item>
<nz-form-label [nzSpan]="8" nzRequired>活动名称</nz-form-label>
<nz-form-control [nzSpan]="15">
<input formControlName="activityName" nz-input placeholder="请输入活动名称" />
</nz-form-control>
</nz-form-item>
</div>
</div>
// 其他控件：
<nz-range-picker [nzDisabledDate]="disabledDate" formControlName="activityTime" [nzShowTime]="{ nzFormat: 'HH:mm' }" nzFormat="yyyy-MM-dd HH:mm"></nz-range-picker>
<input formControlName="personPhone" nz-input placeholder="请输入联系人电话" />
<nz-select *ngIf="type == 'add'" formControlName="partyGroupId" nzPlaceHolder="请选择发起组织" [nzOptions]="partyGroupIdOption" (ngModelChange)="partyGroupIdChange($event)"></nz-select> <div *ngIf="type != 'add' " class="disContent"> {{ partyGroupIdName }} </div>
验证规则文件:
import { Component, OnInit } from '@angular/core';import {AbstractControl, ValidatorFn, Validators} from '@angular/forms';import {NzSafeAny} from 'ng-zorro-antd';export type MyErrorsOptions = { 'zh-cn': string; en: string } & Record<string, NzSafeAny>;export type MyValidationErrors = Record<string, MyErrorsOptions>;export class MyValidators extends Validators { static minLength(minLength: number): ValidatorFn { return (control: AbstractControl): MyValidationErrors | null => { if (Validators.minLength(minLength)(control) === null) { return null; } return { minlength: { 'zh-cn': `最小长度为 ${minLength}`, en: `MinLength is ${minLength}` } }; }; } static maxLength(maxLength: number): ValidatorFn { return (control: AbstractControl): MyValidationErrors | null => { if (Validators.maxLength(maxLength)(control) === null) { return null; } return { maxlength: { 'zh-cn': `最大长度为 ${maxLength}`, en: `MaxLength is ${maxLength}` } }; }; } static mobile(control: AbstractControl): MyValidationErrors | null { const value = control.value; if (isEmptyInputValue(value)) { return null; } return isMobile(value) ? null : { mobile: { 'zh-cn': `手机号码格式不正确`, en: `Mobile phone number is not valid` } }; } static idCard(control: AbstractControl): MyValidationErrors | null { const value = control.value; if (isEmptyInputValue(value)) { return null; } return isCardId(value) ? null : { mobile: { 'zh-cn': `身份证号码格式不正确`, en: `ID number is not valid` } }; }}function isEmptyInputValue(value: NzSafeAny): boolean { return value == null || value.length === 0;}function isMobile(value: string): boolean { return typeof value === 'string' && /(^1\d{10}$)/.test(value);}function isCardId(value: string): boolean { // return typeof value === 'string' && /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/.test(value); return typeof value === 'string' && /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value);}
