首页 文章

指向嵌套FormGroup的变量

提问于
浏览
-1

我很惊讶我没有遇到过询问如何指向嵌套在另一个FormGroup中的FormGroup的问题 . 当您继续以这种方式引用嵌套表单组来访问其中的对象时,它会变得很麻烦和乏味 .

<FromGroup>.controls['FormGroupName'].controls['FormGroupName]...etc.

有没有办法指向typescript文件中的嵌套表单组,然后使用该新变量代替它的眼睛替代方案?

我尝试过以下方法:

parentForm: FormGroup;
nestedForm: FormGroup;
...
// 1. 
nestedForm = this.parentForm.get('nestedFormName')
// 2. 
nestedForm = this.parentForm.controls['nestedFormName']

上面的两个示例都不起作用,因为它返回有关AbstractControls的错误 .

2 回答

  • 1

    'AbstractControl'不能分配给'FormGroup'类型 . 'AbstractControl'类型中缺少属性'controls' . 我的印象是FormGroup,FormControls和FormArray都是抽象控件 .

    这意味着TypeScript不同意将 this.parentForm.get('nestedFormName') 返回的值赋给 FormGroup 类型的变量 . 原因在错误中说明:自the method return type is AbstractControl以来,TypeScript不可能知道实际返回的是 FormGroup . 它可以是FormGroup . 但它也可能是其他东西(例如FormControl或FormArray) . 你知道,但编译器没有 . 所以你必须告诉编译器,使用类型断言,你知道返回的AbstractControl确实是 FormGroup

    nestedForm = this.parentForm.get('nestedFormName') as FormGroup;
    

    举一个更简单的例子,假设您有FruitBasket类,并且要求它将Fruit放在篮子中的某个位置 .

    你当然可以这样做:

    const fruit: Fruit = basket.get(i);
    

    但你不能这样做:

    const banana: Banana = basket.get(i);
    

    因为TypeScript不知道位置i的果实是香蕉,苹果还是梨 . 它可以是任何一个 . 所以,如果你知道香蕉位于i位置,那么你需要告诉TypeScript:

    const banana: Banana = basket.get(i) as Banana;
    
  • 1

    我的解决方案范围非常局限于打字稿 . 查看网络上和angular网站上的其他示例,它说明了使用'formGroupName'来引用HTML中处理嵌套formGroup控件的区域 .

相关问题