时间戳

首页 > 解决方案 > 嵌套表单组件未在提交时设置初始值

angular - 嵌套表单组件未在提交时设置初始值

问题描述

我正在尝试使用 ControlValueAccessors 以反应形式以角度实现嵌套表单组件，并且我一直在遵循本指南：https ://blog.angularindepth.com/angular-nested-reactive-forms-using-cvas-b394ba2e5d0d

除了一个主要问题外，我已经完成了所有工作。如果我的表单是预填充的，即表单用于编辑现有数据而不是创建，那么如果相应的子组件表单值没有更改，则在提交时不会在表单的值上设置初始数据。

我在以下链接上有一个示例设置（打开右下角的控制台）： https ://stackblitz.com/edit/angular-nested-forms-cva-izbrht

如您所见，如果您立即按下提交，则表单值包含两个属性，其值只是两个空字符串。如果您编辑例如名字然后提交，您将看到 basicInfo 属性现在已正确设置其值。

标签： angularangular-reactive-formsreactive-forms

解决方案

@langen，对我来说，它使用 [formGroup] 和 [formControl] 。这是stackoverflow和stackblitz中这个问题的评论

我的主要

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

等等

推荐阅读