嵌套表单无法连接输入？答案

【问题标题】：Nested Form Cant Connect With Input?嵌套表单无法连接输入？
【发布时间】：2021-10-25 05:49:40
【问题描述】：

我有这个组件：

  shelveForm = this.fb.group({
    description_shelve:['input1',[Validators.required,Validators.minLength(5)]],
    id_shelve: ['input2',[Validators.required,WhiteSpaceValidator.cannotContainSpace,Validators.pattern("^[0-9]*$")]],
    war_id:this.fb.group({
      id_warehouse: ['input3']
    })
  })

我的html：

<form [formGroup]="shelveForm" (ngSubmit)="onSubmit()">

{{shelveForm.value | json }}


    <!-- input 1  -->

      <input id="id_shelve" type="text"  formControlName="id_shelve">

    <!-- input 2-->
      <input id="description" type="text"  formControlName="description_shelve">

    <!-- input 3  -->
      <input id="description_war_id" type="text"  formControlName="id_warehouse">

</form>

我得到的json是：

 { 
 "description_shelve": "input1",
 "id_shelve": "input2",
 "war_id": { 
 "id_warehouse": "input3" 
 } 
}

当我在输入 1 和 2 处键入时，值会发生变化，如果我在输入 1 处键入“banana”，则输入 1 会变成香蕉，例如。 "description_shelve: "banana"，但是当我在 input3 输入时，值保持不变，有什么办法可以解决它？

【问题讨论】：

标签： json angular typescript nested angular-reactive-forms

【解决方案1】：

我找到了问题，如果有人遇到同样的问题，你需要提出：

  <div class="p-field" formGroupName="war_id">
  <div>
    <input type="text" pInputText formControlName="id_warehouse"
    [class.is-invalid]="shelveForm.get('description_shelve').invalid && shelveForm.get('description_shelve').touched"/>
  </div>
</div>

【讨论】：