如何检查 angular 反应式表单中的内部表单组状态

Question

我有一个名为 productForm 的表单组，内部表单组名称 productInnerForm.i 可以看到外部表单组的状态和值。通过使用以下标记

{{productForm.status | json}}

{{productForm.value | json}}

当我尝试使用 innerformgroup 状态时出现错误。

<pre>{{productForm.productInnerForm.status | json}}</pre>
 <pre>{{productForm.productInnerForm.value | json}}</pre>

在组件中也未定义。 this.productForm.get('productInnerForm').valid 显示未定义。

外部形式状态按预期工作。

this.productForm.valid;

在component.ts

constructor(public formBuilder : FormBuilder){
}

productForm:FormGroup;

 this.productForm= this.formBuilder.group({
              ProductIDCtrl: '',
           productInnerForm: this.formBuilder.group({
                ProductNameCtrl:[''],
                ProductSUKCtrl:[''],
                ProductStatusCtrl:[''],
                ProductTypeCtrl:['']

              })
            });

    --------------------------------

        <form [formGroup]="productForm" class="secondary-search">

                        <input type="text" formControlName="ProductIDCtrl">


                        <div formGroupName="productInnerForm">
                        <input type="text" formControlName="ProductNameCtrl">
               <input type="text" formControlName="ProductSUKCtrl">

                       <input type="text" formControlName="ProductStatusCtrl">
                      <input type="text" formControlName= "ProductTypeCtrl">
                       </div>

    //For Checking whole form

    <pre>{{productForm.status | json}}</pre>
    <pre>{{productForm.value | json}}</pre>


    How to check the inner form group status .

    <pre>{{productForm.productInnerForm.status | json}}</pre>
    <pre>{{productForm.productInnerForm.value | json}}</pre>



    In component howw to check that

    this.productForm.get('productInnerForm').valid which shows undefined

Answer 1

您可以为内部表单组创建一个 getter 方法：

get productInnerForm(): FormGroup {
  return this.productForm.get('productInnerForm') as FormGroup;
}

然后在您的组件class或模板中使用它：

在 class 组件中：console.log(this.productInnerForm.value);

模板中：{{productInnerForm.status | json}}或{{productInnerForm.value | json}}等

不使用get('...')方法也可以访问内部表单组：

this.productForm.controls['productInnerForm'].value 或 this.productForm.controls['productInnerForm'].status 等

我已经 fork 你的 sb 示例并添加了这个示例，check it out。

如何检查 angular 反应式表单中的内部表单组状态

How to check the innerformgroup status im angular reactive form

angular6

angular-reactive-forms

angular-forms