角反应式嵌套形式

Question

我创建了一个嵌套表单，但奇怪的是，虚拟数据 json 中的参数键由 2 个对象组成，而在实际表单值中，表单数组中只有一个对象。

我找不到任何错误。我不知道发生了什么或导致这种情况发生的原因。

export class App implements OnInit {
  name = 'Angular';
  my_json = {
    machine: {
      idMachine: 'YyWTceUNqsonOvO2ZOLP',
      note: 'accesso con 7u89',
      parameters: [
        {
          description: 'Pompa aria',
          factoryValue: '1676',
          parameter: '7',
        },
        {
          description: 'Cattura ',
          factoryValue: '6589',
          parameter: '5',
        },
      ],
      model: 'AREA',
      serie: 'UIXX7',
      machine: 'T7UID',
    },
    address: 'Via Italia 42',
    phone: '[phone]',
    email: '[email protected]',
    name: 'Pippo',
    surname: 'Master',
    idUser: 'tt0QAHRD9JFuMETnLvjh',
  };
  public formClient!: FormGroup;

  constructor(public formBuilder: FormBuilder) {
    this.formClient = this.formBuilder.group({
      name: ['', Validators.required],
      surname: ['', Validators.required],
      address: ['', Validators.required],
      email: ['', Validators.required],
      phone: ['', Validators.required],
      machine: this.formBuilder.group({
        serie: [''],
        machine: [''],
        note: [''],
        model: [''],
        idMachine: [''],
        parameters: this.formBuilder.array([
          this.formBuilder.group({
            description: [''],
            factoryValue: [''],
            parameter: [''],
          }),
        ]),
      }),
    });
  }

  ngOnInit() {
    console.log('my data ', this.my_json);
    this.formClient.patchValue(this.my_json);
    console.log('my form values ', this.formClient.value);
  }
}

谢谢。

Answer 1

.patchValue()

不会为 FormArray 创建 FormGroup/FormControl 实例。

相反，您需要在分配表单值时映射您的

parameters

值。

您也不想在

constructor

中做那项工作。这应该进入生命周期方法，例如

OnInit()

.

无类型 FormGroup 示例：

  form!: FormGroup;

  initParameterForm(parameter?: IParameter): FormGroup {
    return new FormGroup({
      description(parameter?.description || null),
      factoryValue(parameter?.factoryValue || null),
      parameter(parameter?.parameter || null),
    });
  }

  initMachineForm(machine?: IMachine): FormGroup {
    // other fields here
    
    parameters: new FormArray(machine?.parameters?.map(parameter => initParameterForm(parameter)) || []),
  }

  ngOnInit(): void {
    // other code to get machine, if applicable
    this.form = this.initMachineForm(machine);
  }

如果您使用的是 Angular 15，我强烈建议您提供强类型表单。