angular - 如何仅对角度 2+ 中的特定字段应用动态字段验证
问题描述
在这里,我试图实现动态表单验证,即仅针对特定字段,因为我可以实现动态验证,但我只想为那些我提到名称的字段实现 5 个字段。
说就像我有像名字,姓氏,年龄,性别这样的字段名称 &我有一个像名字,性别这样的数组现在我想要的是有数组的字段必须验证不是所有字段我怎么能做到这一点
下面是我的示例代码
**.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 网址
解决方案
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(''))
}
推荐阅读
- php - Symfony 5 - 在控制器中,执行迁移
- python - 如何在箱线图中取消分隔图
- ubuntu - 如何在 Ubuntu 20.04 LTS 上安装 libwebkitgtk 包?
- python - 如何在 python 中正确存储用户输入?
- python - 使用 Google Cloud KMS 在 Python 中实现双向 TLS
- css - 物化 CSS 选择下拉箭头移位
- javascript - 如何修复我的代码以在第二次单击时隐藏 div 功能
- java - 将 Java 对象数据作为 JSON 字符串打印到服务器响应中
- machine-learning - 我的 Azure 机器学习 Web 服务有相同的结果。如何克服这个问题?
- .net-core - 错误的日期时间保存了 GCP Datastore .net