Question

我正在尝试创建一个表单字段来添加新酒店并指定地址。我有酒店课：

export class Hotel {

  public constructor (
    public name:string,
    public address: Address,
  ){}
}

export class Address {
    country:string;  
    town :string;
    street: string;
}

这是组件中的函数addHotel：

addHotel(hotel:any, address:any){
  if (this.form.valid) {
    let newHotel = new Hotel(hotel["name"], (hotel.address["country"], hotel.address["town"], hotel.address["street"]));

html表单非常简单：

<div class="tab-pane" >
    <div class="form-group">
        <label class="text-gray">Name :</label>
        <div class="input-group">
            <div class="input-group-addon"><i class="fa fa-envelope-o"></i></div>
            <input formControlName="name" class="form-control" type="text">
        </div>
    </div>
</div>
<div class="tab-pane" id="address">
    <div class="form-group">
        <label class="text-gray">Country :</label>
        <div class="input-group" >
            <div class="input-group-addon"><i class="fa fa-map-marker"></i></div>
            <input  class="form-control" type="text">
        </div>
        <label class="text-gray">Town :</label>
        <div class="input-group" >
            <div class="input-group-addon"><i class="fa fa-map"></i></div>
            <input class="form-control" type="text">
        </div>

        <label class="text-gray">Street :</label>
        <div class="input-group" >
            <div class="input-group-addon"><i class="fa fa-map-signs"></i></div>
            <input class="form-control" type="text">
        </div>
    </div>
</div>

我甚至尝试添加新功能addAddress：

addAddress(hotel,address):any{
    //let newAddress = new Address(hotel.address["country"], ,hotel.address["town"], hotel.address["street"]);
    this.address.push(hotel.address["country"], hotel.address["town"], hotel.address["street"]);
    console.log(this.address);
    return this.address;
  }

但它总是返回空数组{country：null，town：null，street：null} 或着名的错误：错误类型错误：无法读取未定义的属性“country”

Answer 1

使用安全导航操作符（？）

看起来像这样

<p>Employer: {{address?.country}}</p>

安全导航操作员（？）表示雇主字段是可选的，如果未定义，表达式的其余部分应该是忽略。

参考 https://angular.io/guide/cheatsheet

Answer 2

阅读这篇文章，了解您想要的所有详细信息：https://angular.io/guide/reactive-forms#nested-formgroups

请定义模板和打字稿之间的绑定，以便从模板表单控件示例中获取值：

export class etailComponent5 {
  hotelForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.hotelForm= this.fb.group({ // <-- the parent FormGroup
      name: [''],
      address: this.fb.group({ // <-- the child FormGroup
        street: '',
        town: '',
        country: ''
      })
    });
  }

  saveform() {
    const hotel:Hotel = hotelForm.value;
   //or to get individual control you need to do like this 
   // const street= hotelForm.get('address.street').value
   // const town= hotelForm.get('address.town').value
   // const coutnry= hotelForm.get('address.country').value
  }
}

<form [formGroup]="hotelForm" >
  <div class="form-group">
      <label class="center-block">Name:
        <input class="form-control" formControlName="name">
      </label>
  </div>
        <div formGroupName="address" class="well well-lg">
          <h4>Secret Lair</h4>
          <div class="form-group">
            <label class="center-block">Street:
              <input class="form-control" formControlName="street">
            </label>
          </div>
          <div class="form-group">
            <label class="center-block">Town:
              <input class="form-control" formControlName="town">
            </label>
          </div>
          <div class="form-group">
            <label class="center-block">Country:
              <input class="form-control" formControlName="country">
            </label>
          </div>
        </div>
</form>

工作：

const address = new Address();
address.country='abc';
address.street= 'abc';
address.town ='abc';
let newHotel = new Hotel('abc', address);
console.log(newHotel.name);
console.log(`${newHotel.address.country},${newHotel.address.street},${newHotel.address.town}`);

根据您的结构address - property是hotel中使用的类，因此您需要初始化它，然后您可以分配地址属性。如上面的代码所示..

在您的代码中，您尝试在不初始化的情况下设置值

我建议使用interface而不是class

    export interface Hotel {
       name:string;
       address: Address;
    }

    export interface Address {
        country:string;  
        town :string;
        street: string;
    }

const hotel: Hotel  = { name: 'name of hotel',
                        address: { country:'abc', town : 'abc', city:'abc' } 
                      };

Answer 3

即使我将console.log(address.town);添加到addAddress函数，我也会得到 undefined 。我该怎么办？

错误TypeError：无法读取未定义的属性''

3 个答案: