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 { }

效果图

image

参考链接

https://ng.ant.design/version/11.4.x/components/form/zh#components-form-demo-dynamic-rule

posted @   胸怀丶若谷  阅读(337)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
历史上的今天:
2021-08-23 pandas 格式化日期
2020-08-23 django.db.utils.OperationalError: (1366, "Incorrect string value: '\\xE5\\xA4\\xAB\\xE4\\xBA\\xBA' f
2020-08-23 linux下开启、关闭、重启mysql服务命令
点击右上角即可分享
微信分享提示

目录导航