Как проверить статус внутренней формы группы?

Question

У меня есть группа форм с именем productForm, а внутреннее имя formgroupName productInnerForm.i может видеть состояние и значение группы внешних форм. используя разметку ниже

{{productForm.status | json}}

{{productForm.value | json}}

когда я пытался получить статус внутренней группы, получая ошибку.

<code><pre>{{productForm.productInnerForm.status | json}}

{{productForm.productInnerForm.value | json}}

В компоненте также неопределенное this.productForm.get('productInnerForm').valid, который показывает неопределенное.

статус внешней формы работает как положено.

this.productForm.valid;

в component.ts

constructor(public formBuilder : FormBuilder){
}

ProductForm: FormGroup;

<code> 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}}

{{productForm.value | json}}

Как проверить статус группы внутренней формы.

{{productForm.productInnerForm.status | json}}

{{productForm.productInnerForm.value | json}}

В компоненте как проверить это this.productForm.get ('productInnerForm'). valid, который показывает неопределенный

Answer 1

Вы можете создать метод получения для своей внутренней группы форм:

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

А затем используйте его в своем классе компонентов или шаблоне:

В компоненте класса: console.log(this.productInnerForm.value);

В шаблоне: {{productInnerForm.status | json}} или {{productInnerForm.value | json}} и т. Д.

Вы также можете получить доступ к внутренней группе форм без использования get('...') метод:

this.productForm.controls['productInnerForm'].value или this.productForm.controls['productInnerForm'].status и т. Д.

Я раздвоил ваш пример с sb и добавил этот пример, проверьте его .