在Angular 6中,可以使用FormGroup和FormControl构建多层级的响应式表单。下面是一个示例解决方法:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
myForm: FormGroup;
ngOnInit() {
this.myForm = new FormGroup({
category: new FormControl('', Validators.required),
subcategory: new FormControl('', Validators.required),
subsubcategory: new FormControl('', Validators.required)
});
}
// 其他逻辑代码...
}
在上述示例中,我们使用FormGroup来表示整个表单,并使用FormControl来表示每个表单字段。通过在HTML模板中使用formControlName属性,将表单字段与FormGroup中的FormControl关联起来。
此外,我们还使用Validators.required来添加必填字段的验证器。根据选择的选项,使用*ngIf来显示下一个级别的表单字段。
这是一个基本的示例,你可以根据自己的需求进行扩展和修改。