form表单

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);}