Вложенные компоненты формы не устанавливаются с начальными значениями при отправке

Question

Я пытаюсь реализовать вложенные компоненты формы в угловых и реактивных формах с помощью ControlValueAccessors, и я следую этому руководству: https://blog.angularindepth.com/angular-nested-reactive-forms-using-cvas-b394ba2e5d0d

У меня есть все для работы, кроме одной серьезной проблемы.Если моя форма предварительно заполнена, т. Е. Форма используется для редактирования существующих данных, а не для создания, то исходные данные не устанавливаются в значение формы при отправке, если соответствующие значения формы дочернего компонента не были изменены.

У меня есть пример настройки по следующей ссылке (откройте консоль в правом нижнем углу): https://stackblitz.com/edit/angular-nested-forms-cva-izbrht

Как вы можете видеть, если вы нажмете кнопку Отправить немедленно, значение формы содержит два свойстваэто значение только две пустые строки.Если вы измените, например, имя, а затем подтвердите, вы увидите, что свойство basicInfo теперь правильно установлено со своими значениями.

Answer 1

@ langen, для меня это использовать [formGroup] и [formControl].это комментарий этого вопроса в stackoverflow и stackblitz

My Main

<form [formGroup]="formGroup">
  <app-personal-details-form [formGroup]="formGroup"></app-personal-details-form>
</form>
//It's in main where I create the formGroup:
formGroup = new FormGroup(
    {
      name: new FormGroup({
        firstname: new FormControl(null, { validators: [Validators.required] }),
        lastname: new FormControl(null, { validators: [Validators.required] }),
      }),
      gender: new FormControl(null, { validators: [Validators.required] }),
      address: new FormGroup({
        streetaddress: new FormControl(null, { validators: [Validators.required] }),
        city: new FormControl(null, { validators: [Validators.required] }),
        state: new FormControl(null, { validators: [Validators.required] }),
        zip: new FormControl(null, { validators: [Validators.required] }),
        country: new FormControl(null, { validators: [Validators.required] })
      }),
      phone: new FormGroup({
        phone: new FormControl(null, { validators: [Validators.required] }),
        countrycode: new FormControl(null, { validators: [Validators.required] }),
      })

    })

Остальная часть компонента:

Личные данные

<div [formGroup]="formGroup">
    <app-name-form [formGroup]="formGroup.get('name')"></app-name-form>
    <select formControlName="gender">
    <option *ngFor="let gender of Gender | keyvalue" [value]="gender.value">{{ gender.value }}</option>
  </select>
  <app-address-form [formGroup]="formGroup.get('address')"></app-address-form>
  <app-phone-form [formGroup]="formGroup.get('phone')"></app-phone-form>
</div>
//and 
@Input() formGroup:FormGroup;

Адресная форма

<div [formGroup]="formGroup">
  <input type="text" placeholder="Street address" formControlName="streetaddress">
  <span *ngIf="formGroup.get('streetaddress').invalid">*</span>
  <input type="text" placeholder="City" formControlName="city">
  <input type="text" placeholder="State" formControlName="state">
  <input type="text" placeholder="Zip" formControlName="zip">
  <input type="text" placeholder="Country" formControlName="country">
</div>
//and 
@Input() formGroup;

Имя-форма

<div [formGroup]="formGroup">
  <input type="text" placeholder="First name" formControlName="firstname">
  <input type="text" placeholder="Last name" formControlName="lastname">
</div>
//and
    @Input() formGroup;

и т. Д.

Answer 2

@ Lagen, если у вас есть пользовательский элемент управления формой, вам нужен канал в component.eg в вашем billing-info.component.

public nestedForm: FormGroup = new FormGroup({
  basicInfo: new FormControl({fname:"Carl init",email:"myemail init@whatever.com"}),
  address: new FormControl({addressLine:"My address",areacode:'12345 new'})
  });

Конечно, вы можете удалить инициализированные значения в компоненте.

Да, FormControl может хранить объект.Вы можете представить элемент управления customForm как «черный ящик».Интересно, что вы кормите и получаете значение, а не то, как оно сделано (лично я думаю, что использование настраиваемого элемента управления для создания вложенной формы - это использование кувалды для дробления орехов)

Answer 3

Я решил это, создав полную FormGroup в родительском компоненте, а затем передав дочерние формы дочерним компонентам в качестве входных данных.Это устраняет необходимость использовать ControlValueAccessors.

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