Angular 6允许我们动态创建表单控件,包括自定义验证。在表单数组中动态创建的表单控件中的自定义验证,可以通过以下步骤实现:
NgModule
装饰器中导入FormsModule
和ReactiveFormsModule
。import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
ReactiveFormsModule
],
// 其他配置项
})
export class YourModule { }
import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
@Component({
selector: 'app-your-component',
templateUrl: 'your-component.component.html',
styleUrls: ['your-component.component.css']
})
export class YourComponent implements OnInit {
form: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.form = this.formBuilder.group({
// 创建表单控件和验证规则
controlsArray: this.formBuilder.array([])
});
}
// 添加新的表单控件
addControl() {
const controlArray = this.form.get('controlsArray') as FormArray;
controlArray.push(this.formBuilder.control('', Validators.required));
}
// 移除表单控件
removeControl(index: number) {
const controlArray = this.form.get('controlsArray') as FormArray;
controlArray.removeAt(index);
}
// 自定义验证规则
customValidator(control: AbstractControl): ValidationErrors | null {
// 自定义验证逻辑
}
}
<form [formGroup]="form">
<div formArrayName="controlsArray">
<div *ngFor="let control of form.get('controlsArray').controls; let i = index">
<input type="text" [formControlName]="i" />
<!-- 显示自定义错误信息 -->
<div *ngIf="form.get('controlsArray').controls[i].hasError('custom')">
Custom validation error message.
</div>
</div>
</div>
</form>
<button (click)="addControl()">Add Control</button>
<button (click)="removeControl(i)">Remove Control</button>
import { AbstractControl, ValidationErrors } from '@angular/forms';
// ...
class YourComponent implements OnInit {
// ...
ngOnInit() {
// ...
// 注册自定义验证规则
this.form.get('controlsArray').setValidators(this.customValidator);
}
customValidator(control: AbstractControl): ValidationErrors | null {
// 自定义验证逻辑
}
}
通过以上步骤,我们可以实现在Angular 6中动态创建表单控件并添加自定义验证。在这个例子中,我们创建了一个表单控件数组controlsArray
,并提供了添加和移除控件的方法。同时,我们还通过customValidator
方法实现了自定义验证逻辑。在模板中,我们使用*ngFor
指令迭代表单控件,并使用formControlName
指令将控件绑定到相应的索引。如果控件验证失败,我们可以显示自定义的错误信息。
这里推荐腾讯云的相关产品:腾讯云云服务器、腾讯云数据库 MySQL 版等。
Elastic 实战工作坊
Elastic 实战工作坊
云+社区沙龙online第6期[开源之道]
Elastic 中国开发者大会
Elastic 中国开发者大会
DB TALK 技术分享会
云+社区技术沙龙[第6期]
云+社区开发者大会 长沙站
领取专属 10元无门槛券
手把手带您无忧上云