嵌套表单无法连接输入？

Question

我有这个组件：

  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 时，值保持不变，有什么办法可以解决这个问题吗？

Answer 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>

嵌套表单无法连接输入？

Nested Form Cant Connect With Input?

json

nested

typescript

angular

angular-reactive-forms