Question

我需要使用角度反应创建动态形式。但这有许多子表单组，并且这些组可能会因表单选择框的值而改变。

  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    department: new FormControl('')
  });

部门类型为'a', 'b', 'c'。

如果用户选择'a'，我将在profileForm中添加一个名为"departmentSettings"的新FormGroup

aFormGroup =  new FormGroup({
    xWorkTime: new FormControl(''),
    yWorkTime: new FormControl('')
})

profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    department: new FormControl(''),
    departmentSettings: new FormGroup({
        xWorkTime: new FormControl(''),
        yWorkTime: new FormControl('')
    })
});

如果用户选择'b'，我将在profileForm中添加一个新的FormGroup

bFormGroup =  new FormGroup({
    someProperty: new FormControl(''),
    otherProperty: new FormControl('')
})

profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    department: new FormControl(''),
    departmentSettings:  new FormGroup({
        someProperty: new FormControl(''),
        otherProperty: new FormControl('')
    })
});

其他情况是这样的。那么我该如何使用简单的方法在angular中做到这一点？

Answer 1

在您的html中，向部门输入添加（change）='someFunction（）'属性。

TEST_DATE      TEST_ID STUDENT_ID FLAG
----------- ---------- ---------- -----------------
2013-05-02         705       1003 
2013-05-12         707      20214 
2013-05-18         707      20214 duplicated test
2013-05-18         707      20214 duplicated test
2023-05-18         707       1003 Test date invalid

这将在输入值更改时触发该功能，然后您可以向反应式表单添加新的表单控件。

反应性表单具有FormGroup.addControl（）方法来执行此操作。 https://angular.io/api/forms/FormGroup

如何使用反应形式创建动态角度形式？

1 个答案: