Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/jquery-ui/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 角度-嵌套formgroup中的双向绑定_Angular_Data Binding_Nested Forms - Fatal编程技术网

Angular 角度-嵌套formgroup中的双向绑定

Angular 角度-嵌套formgroup中的双向绑定,angular,data-binding,nested-forms,Angular,Data Binding,Nested Forms,我已经使用builder创建了一个嵌套的formgroup。在数据库中添加数据是成功的,但当我试图将数据映射回相同的表单时,不确定如何实现它。我认为双向绑定会有所帮助,但面临许多问题。任何人都可以建议如何在嵌套formgroup中实现双向绑定 ngOnInit(){ this.myForm = this._fb.group({ name: ['', [Validators.required, Validators.minLength(5)]], addresses: this._fb.

我已经使用builder创建了一个嵌套的formgroup。在数据库中添加数据是成功的,但当我试图将数据映射回相同的表单时,不确定如何实现它。我认为双向绑定会有所帮助,但面临许多问题。任何人都可以建议如何在嵌套formgroup中实现双向绑定

ngOnInit(){

this.myForm = this._fb.group({
  name: ['', [Validators.required, Validators.minLength(5)]],
  addresses: this._fb.array([
      this.initAddress(),
  ]),
  search:['']
});
  }

  initAddress() {
return this._fb.group({
    street: ['', Validators.required],
    postcode: ['']
});
  }

  addAddress() {

const control = <FormArray>this.myForm.controls['addresses'];
control.push(this.initAddress());
  }
我已经从数据库中提取了特定的数据。现在我想使用相同的组件(用于添加)进行更新

模板为:

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value)">

<div class="form-group">
    <label>Name</label>
    <input type="text" formControlName="name">
    <small *ngIf="!myForm.controls.name.valid" class="text-danger">
        Name is required (minimum 5 characters).
    </small>
</div>

<div formArrayName="addresses">
    <div *ngFor="let address of myForm.controls.addresses.controls; let i=index">
        <div>
            <span>{{ applicant[i] }}</span>
            <!-- <span *ngIf="myForm.controls.addresses.controls.length > 1" (click)="removeAddress(i)">
            </span> -->
        </div>
        <div [formGroupName]="i">
            <app-address [group]="myForm.controls.addresses.controls[i]"></app-address>
        </div>
    </div>
    <button type="add" (click)=" addAddress(i)">Add address</button>
</div>

<p>Form value: {{ myForm.value | json }}</p> 
<br>
<p>Form value: {{ myForm.status | json }}</p>

<button type="submit" [disabled]="!myForm.valid">Submit</button>
<button type="reset">Reset</button>

</form>

名称
名称是必需的(至少5个字符)。
{{申请人[i]}
添加地址
表单值:{{myForm.value | json}


表单值:{myForm.status | json}

提交 重置
地址组件模板:

<div [formGroup]="adressForm">
<div class="form-group col-xs-6">
  <label>street</label>
  <input type="text" class="form-control" formControlName="street">
  <small [hidden]="adressForm.controls.street.valid" class="text-danger">
      Street is required
  </small>
</div>
<div class="form-group col-xs-6">
  <label>postcode</label>
  <input type="text" class="form-control" formControlName="postcode">
</div>
</div>

街道
街道是必需的
邮政编码

只需在FormGroup上调用setValue或patchValue方法,并将希望表单具有的值传递给它即可。对象显然应该与FormGroup的结构匹配

this.myForm.patchValue({
    name: 'some name',
    search: 'some value',
    addresses: [{
        street: 'some street',
        postcode: '11111'
    }]
})

显示模板:)感谢您的帮助。我应该在哪里包含补丁价值?我有ngOnInit、initAddress、addAddress和removeAddress。我使用了data.service将数据传输到主组件。请提出建议。只要你得到数据。如果该组件在初始化时就拥有它,那么您可以在ngOnInit钩子中运行它。
this.myForm.patchValue({
    name: 'some name',
    search: 'some value',
    addresses: [{
        street: 'some street',
        postcode: '11111'
    }]
})