无法访问嵌套 formGroup 的值

Question

我正在创建嵌套的 formGroup 字段。以下是我的html

<form [formGroup]="userProfileForm" (ngSubmit)="bookUser()" class="form">
    <!-- userName -->
    <div class="form-group">
      <label for="userName">Name:</label>
      <input type="text" class="form-control" id="userName" formControlName="userName">
    </div>

    <!-- mobile -->
    <div class="form-group">
      <label for="mobileNumber">Mobile:</label>
      <input type="text" class="form-control" id="mobileNumber" formControlName="mobileNumber">
    </div>

    <!-- emailId -->
    <div class="form-group">
        <label for="emailId">Email id:</label>
        <input type="text" class="form-control" id="emailId" formControlName="emailId">
    </div>

    <!-- password -->
    <div class="form-group">
        <label for="password">Password:</label>
        <input type="text" class="form-control" id="password" formControlName="password">
    </div>

    <!-- address -->
    <div class="form-group">
      <div formGroupName="address">
        <label for="city">City:</label>
        <input type="text" class="form-control" id="city" formControlname="city">

        <label for="state">State:</label>
        <input type="text" class="form-control" id="state" formControlname="state">

        <label for="zipCode">Zip Code:</label>
        <input type="text" class="form-control" id="zipCode" formControlname="zipCode">
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Create Profile</button>
</form>

下面是我正在使用的打字稿...

ngOnInit() {
    this.userProfileForm=this.formBuilder.group({
      userName:['', Validators.required],
      mobileNumber:['', Validators.required],
      emailId:['', Validators.required],
      password:['', Validators.required],
      address: this.formBuilder.group({
        city:['', Validators.required],
        state:['', Validators.required],
        zipCode:['', Validators.required]
      })
    });
  }

当我尝试在 html 中打印它时，我没有收到子 formGroup 的 city formControl。 我尝试以不同的方式访问该值，例如： (<FormGroup>this.userProfileForm.get('address')).get('city').value; 和 this.city=this.userProfileForm['controls'].address['controls'].city.value 但我仍然无法让城市字段以 html 显示。 我也使用了this.city=this.userProfileForm['controls'].address['controls'].city.valid，它总是返回false。

我还创建了 2 个模型类： 用户资料

import { Address } from "./address";

export class UserProfile{
    userName:string;
    emailId:string;
    password:string;
    mobileNumber:string;
    address:Address;
}

地址

export class Address{
    city:string;
    state:string;
    zipCode:string;
}

如何访问嵌套的 formGroup 值？我在这里做错了什么？

Answer 1

一切正常。这是您写的formControlname 而不是formControlName 的打字错误。将小写的 n 改为大写的 N。

<div formGroupName="address">
        <label for="city">City:</label>
        <input type="text" class="form-control" id="city" formControlName="city">

        <label for="state">State:</label>
        <input type="text" class="form-control" id="state" formControlName="state">

        <label for="zipCode">Zip Code:</label>
        <input type="text" class="form-control" id="zipCode" formControlName="zipCode">
      </div>

Answer 2

请在How to use formControlName and deal with nested formGroup? 上找到@Somdatt_Bhadvariya 的以下解决方案，它适用于 我。

打字稿：

 this.myForm = fb.group({
        'fullname': ['', Validators.required],
        'gender': [],
        'address': fb.group({
            'street': [''],
            'houseNumber': [''],
            'postalCode': ['']
        })
    });

HTML：

  <form [formGroup]="myForm" >
       <div class="form-group">
          <label for="fullname">Username</label>
          <input type="text" id="username" formControlName="fullname" class="form-control">            
       </div>
       <div class="radio" *ngFor="let gender of genders">
          <label>
          <input type="radio" formControlName="gender" [value]="gender">{{ gender }} </label>
       </div>
       <div formGroupName="address">
          <div class="form-group">
             <label for="street">Username</label>
             <input type="text" id="username" value="street" formControlName="street" class="form-control">            
          </div>
          <div class="form-group">
             <label for="houseNumber">Username</label>
             <input type="text" id="username" value="street" formControlName="houseNumber" class="form-control">            
          </div>
          <div class="form-group">
             <label for="postalCode">Username</label>
             <input type="text" id="username" value="street" formControlName="postalCode" class="form-control">            
          </div>
       </div>
    </form>