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

Angular 如何仅对角度2+;中的特定字段应用动态字段验证;,angular,typescript,Angular,Typescript,在这里,我试图实现动态表单验证,即仅针对特定字段,因为我可以实现动态验证,但我只想为我提到的那些字段实现5个字段 比如说,我有一个字段名,如firstname,lastname,age,gender&我有一个数组,如first name,gender,现在我想要的是有数组的字段必须验证不是所有字段我怎么能做到 下面是我的示例代码 **.html** <div class="jumbotron"> <div class="container"> &

在这里,我试图实现动态表单验证,即仅针对特定字段,因为我可以实现动态验证,但我只想为我提到的那些字段实现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>
我的工作地址


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

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)] : []]
});

工作

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

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)] : []]
});
工作

现在

现在


根据数组中的元素,是否需要验证?是的,我的意思是模板中有firstname、lastname、age、gender等字段,我有data={firstname,genger}等数组。我不想对数据中提到的所有字段应用验证,我只想对那些字段应用验证。根据数组中的元素,使用FormArray,你需要验证吗?是的,我的意思是模板中有像firstname、lastname、age、gender这样的字段,我有一个像data={firstname,genger}这样的数组。我不想对数据中提到的所有字段应用验证,只想对我必须应用验证的字段使用FormArray,小忙我尝试使用数组创建动态表单我在创建表单时在某些地方卡住了@Dexter然后你可以尝试
FormArray
,正如Var在回答中建议的那样小忙我尝试使用数组创建动态表单我在创建表单时在某些地方卡住了@Dexter然后你可以按照Var在回答中的建议,尝试
FormArray
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(''))
}