Angular - двухстороннее связывание во вложенной формгруппе - PullRequest
Новая
       25

Angular - двухстороннее связывание во вложенной формгруппе

0 голосов
/ 08 июня 2018

Я создал вложенную группу форм с помощью компоновщика.Добавление данных в базу данных прошло успешно, но когда я пытаюсь отобразить данные обратно в ту же форму, я не уверен, как этого добиться.Я думал, что двухстороннее связывание поможет, но столкнется со многими проблемами.Может кто-нибудь предложить, пожалуйста, как добиться двухстороннего связывания во вложенной форме группы. 

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());
  }

Интерфейс клиента: 

export class Customer {
_id?: string;
name: string;
addresses: Address[];
}

export interface Address {
street: string;
postcode: string;
}

Я выбрал конкретные данные из базы данных.Теперь я хотел бы использовать тот же компонент (используемый для добавления) для целей обновления.

шаблон: 

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

Шаблон компонента адреса: 

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

1 Ответ

0 голосов
/ 09 июня 2018

Просто вызовите методы setValue или patchValue в FormGroup и передайте ему значение, которое вы хотите, чтобы ваша форма имела.Очевидно, что объект должен соответствовать структуре FormGroup. 

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