如何在 angular 中的嵌套反应形式内修补 select 框值？

Question

用户class如下：

export class User {
 name: string
 details: Details;
}

详情class如下：

export class Details {
country: Country;
major : Major;
}

主要class如下：

export class Major{
department : string;
subject : Subject;
}

我创建了如下表格：

   userForm : FormGroup;
    
   constructor(private fb: FormBuilder){}

   ngOnInit(): void {
    this.createUserForm();
  }
  
  
  createUserForm() {
    this.userForm = this.fb.group(
      {
        name:new FormControl(null, Validators.required),
        details: this.fb.array([this.createDetailsForm()])
      }
    );
  }

  createDetailsForm(): FormGroup {
     return this.fb.group({
      country:this.createCountryForm(), 
      major:this.fb.array([this.createMajorForm()])
    })
  }


  createCountryForm(): FormGroup {
    return this.fb.group({
      id: new FormControl(null)
    })
  }

  createMajorForm(): FormGroup {
    return this.fb.group({
      department:new FormControl(null),
      subject: this.createSubjectForm()
    });
  }
  
  
    createSubjectForm(): FormGroup {
    return this.fb.group({
      id: new FormControl(null)
    })
  }

下面是我JSON在服务器端创建用户：

 {
    "name": "Kevin",
    "details": [{
        "country": {
            "id": 1 //used in select box. It is not getting patched from user form.(problem area)
        },
        "major": [{
            "department": "Science",
            "subject": {
                "id": 2 //used in select box. It is not getting patched from user form. (problem area)
            }
        }]
    }]
  }

国家 class 如下：

export class Country{
    id: number;
    name: string;
}

国家将有如下数据：

 countries : Country [] = [
    {id:1, name:"Serbia"},
    {id:2, name:"Slovenia"},
    {id:3,name:"India"}
    ]

Html 国家部分如下：

<div [formGroupName]="country">
                            <select>
                              <option
                                *ngFor="let c of countries"
                                [Value]="c.id"
                              >
                                {{ c.name }}
                              </option>
                            </select>
                          </div>

主题是 class 如下：

export class Subject{
  id:number;
  name:string;
}

Subject will be populated from server as below:

   subjects : Subject [] = [
    {id:1, name:"Chemistry"},
    {id:2, name:"Physics"},
    {id:3, name:"Botany"}
    ]

Html部分题目如下：

  <div [formGroupName]="subject">
                                <select>
                                  <option
                                    *ngFor="let s of subjects"
                                    [Value]="s.id"
                                  >
                                    {{ s.name }}
                                  </option>
                                </select>
                              </div>

问题解释： 这是一个用户详细信息表单。它由嵌套形式的表单数组和表单组组成。我可以在 select 框区域中填充主题和国家/地区。但是我无法在我的用户表单中为主题和国家/地区修补或设置 id 值。

现在我正在使用它来修补我的用户表单：

this.service.registerUser(this.userForm.value);

那么修补 select 框值的正确方法是什么？我在 ts 部分或 html 部分做错了什么吗？或者我需要做些什么来从用户表单中的主题和国家 select 框中设置 id 值？以及如何在 select 框内设置控件？我是否必须独立修补 select 框值？我还将使用此表单进行编辑功能，以防万一它对修补或设置值有任何影响。任何类型的建议或解决方案都将受到高度赞赏。提前致谢。

Answer 1

您尚未在任何 HTML 控件上设置 formControlName，因此您的模板未绑定到表单模型。
您不应在 formGroupName 周围使用 []，因为您绑定的是字符串值而不是变量。

你需要这样的东西：

<div formGroupName="country">
   <select formControlName=“id”>
   …

要修补您可以使用的值：

this.userForm.get(‘country.id’).patchValue(123);

如何在 angular 中的嵌套反应形式内修补 select 框值？

How to patch select box value inside nested reactive forms in angular?

angular

typescript

angular-reactive-forms

angular-formbuilder