在Angular中,可以使用formGroup
和formControlName
指令来创建响应式表单。要实现嵌套子级确定启用/禁用的功能,可以使用以下方法:
首先,创建一个嵌套的响应式表单,其中包含一个父级表单和一个子级表单。在父级表单中,使用formControl
来跟踪是否启用或禁用子级表单。
在组件的模板中,添加以下代码:
在组件的类中,创建父级表单和子级表单的实例,并设置校验规则:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
parentForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.parentForm = this.fb.group({
enableChildForm: [false],
childForm: this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
})
});
}
}
在上面的代码中,我们使用formBuilder
来创建父级表单和子级表单的实例。父级表单的enableChildForm
控件跟踪是否启用子级表单。子级表单的name
和email
控件设置了必填和电子邮件校验规则。
现在,当父级表单中的“Enable Child Form”复选框被选中时,子级表单将启用。否则,子级表单将被禁用。
希望以上解决方法能够帮助到你!