如何仅对角度 2+ 中的特定字段应用动态字段验证

Posted 2023-03-13

【中文标题】如何仅对角度 2+ 中的特定字段应用动态字段验证

【英文标题】：how to apply dynamic field validation only for specific fields in angular 2+

【发布时间】：2019-03-02 22:23:49

【问题描述】：

我在这里尝试实现动态表单验证，即仅针对特定字段，因为我可以实现动态验证，但我只想为那些我提到名称的字段实现 5 个字段。

说我有像 firstname,lastname,age,gender 这样的字段名称，并且我有一个像 first name,gender 这样的数组现在我想要的是这些字段有数组必须验证不是所有字段我怎么能做到这一点

下面是我的示例代码

**.html**

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <h2>Angular 6 Reactive Form Validation</h2>
                <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
                    <div class="form-group">
                        <label>First Name</label>
                        <input type="text" formControlName="firstName" class="form-control" [ngClass]=" 'is-invalid': submitted && f.firstName.errors " />
                        <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
                            <div *ngIf="f.firstName.errors.required">First Name is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Last Name</label>
                        <input type="text" formControlName="lastName" class="form-control" [ngClass]=" 'is-invalid': submitted && f.lastName.errors " />
                        <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
                            <div *ngIf="f.lastName.errors.required">Last Name is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input type="text" formControlName="email" class="form-control" [ngClass]=" 'is-invalid': submitted && f.email.errors " />
                        <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
                            <div *ngIf="f.email.errors.required">Email is required</div>
                            <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" formControlName="password" class="form-control" [ngClass]=" 'is-invalid': submitted && f.password.errors " />
                        <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                            <div *ngIf="f.password.errors.required">Password is required</div>
                            <div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <button [disabled]="loading" class="btn btn-primary">Register</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

.ts

import  Component, OnInit  from '@angular/core';
import  FormBuilder, FormGroup, Validators  from '@angular/forms';

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
)
export class AppComponent implements OnInit  

   registerForm: FormGroup;
    submitted = false;

    constructor(private formBuilder: FormBuilder)  

    ngOnInit() 
        this.registerForm = this.formBuilder.group(
            firstName: ['', Validators.required],
            lastName: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]],
            password: ['', [Validators.required, Validators.minLength(6)]]
        );
    

    // convenience getter for easy access to form fields
    get f()  return this.registerForm.controls; 

    onSubmit() 
        this.submitted = true;

        // stop here if form is invalid
        if (this.registerForm.invalid) 
            return;
        

        alert('SUCCESS!! :-)')
    

我的 Stackblitz 网址

https://stackblitz.com/edit/angular-mbagcm

【问题讨论】：

基于数组中存在的元素，是否需要验证？

是的，我的意思是我们在模板中有名字、姓氏、年龄、性别等字段，并且我有一个像 data = firstname,genger 这样的数组。我不想对数据中提到的所有字段应用验证，只有那些我必须应用验证的字段

使用 FormArray，

【参考方案1】：

您可以根据以下条件为字段设置验证器

requiredValids: string[] = ['firstName', 'gender'];

this.registerForm = this.formBuilder.group(
  firstName: ['', this.requiredValids.indexOf('firstName') != -1 ? [Validators.required] : []],
  lastName: ['', this.requiredValids.indexOf('lastName') != -1 ? [Validators.required] : []],
  email: ['', this.requiredValids.indexOf('email') != -1 ? [Validators.required, Validators.email] : []],
  password: ['', this.requiredValids.indexOf('password') != -1 ? [Validators.required, Validators.minLength(6)] : []]
);

工作Stackblitz

【讨论】：

一个小忙，我正在尝试使用一个数组创建动态表单，我在创建表单时卡在了某个位置并认为stackblitz.com/edit/angular-awguej

@Dexter 然后您可以按照答案中 Var 的建议尝试FormArray

【参考方案2】：

this.formBuilder.group( ABC: new FormArray([]), 

现在。

const abcFormArray = this.formBuilder.controls['ABC'] as FormArray;

Items = [Firstname, Lastname]

Items.forEach(() => 
// do your condition :-
abcFormArray.push((new FormControl(''))