无法访问嵌套formGroup的值

Posted 2021-03-26

我正在创建嵌套的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个模型类：UserProfile

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值？我在这里错了吗？

答案

一切正常。您输入的是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>

另一答案

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

Typescript：

 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>