如何使用对象类型的输入字段创建角度形式

Question

我是 Angular 的新手。我想创建一个以下列方式接受用户输入的表单。 。 为此，我创建了一个包含以下变量的类

export class Hotels {
   
    name: string;
    email: string;
    address1: string;
    address2: string;
    bookingList: Contract[];
}

Contract 是另一个具有各自属性的模型类。

export class Contract {
    start_date: string;
    end_date: string;
   
}

前端 HTML 表单如下所示，

<form (ngSubmit) = "saveHotel()">

    <input type="text" name = "name" [(ngModel)]=" hotel.name" placeholder="Enter hotel name"/>
    <input type="text" name = "email" [(ngModel)]=" hotel.email" placeholder="Enter hotel email"/>
    <input type="text" name = "address1" [(ngModel)]=" hotel.address1" placeholder="Enter hotel address line 1"/>
    <input type="text" name = "address2" [(ngModel)]=" hotel.address2" placeholder="Enter hotel address line 2"/>
    <input type="text" name = "address2" [(ngModel)]=" hotel.bookingList.start_date" placeholder="Enter hotel address line 2"/>
    <input type="text" name = "address2" [(ngModel)]=" hotel.bookingList.end_date" placeholder="Enter hotel address line 2"/>

    <button type="submit">Add Hotel</button>
</form>

但是这并不成功，因为它显示了以下错误

组件文件

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Hotels } from 'src/app/models/hotels';
import { HotelsService } from 'src/app/services/hotels.service';

@Component({
  selector: 'app-add-hotels',
  templateUrl: './add-hotels.component.html',
  styleUrls: ['./add-hotels.component.css']
})
export class AddHotelsComponent implements OnInit {
  hotel : Hotels = new Hotels();
  constructor(private _hotelService : HotelsService,
    private _router:Router) { }

  ngOnInit(): void {
  }

  saveHotel(){
    this._hotelService.saveHotels(this.hotel).subscribe(
      data =>{
        console.log('response', data)
        this._router.navigateByUrl("/hotels");//to navigate back to main hotels pahge
      }
    )
  }
}

服务文件

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Hotels } from '../models/hotels';

@Injectable({
  providedIn: 'root'
})
export class HotelsService {

  //to store http endpoint
  private getUrl: string = "http://localhost:8080/get/hotels";

  private postUrl: string = "http://localhost:8080/savehotel";
  constructor(private _httpClient:HttpClient) {  }

  getHotels(): Observable<Hotels[]>{
    return this._httpClient.get<Hotels[]>(this.getUrl).pipe(
      map(response => response)
    )
  }

  saveHotels(hotels: Hotels): Observable<Hotels> {
    return this._httpClient.post<Hotels>(this.postUrl, hotels);//no need to map as we just have to return the posted value back to component
  }
}

Answer 1

在 Hotels 类中，bookingList 是一个数组，因此您不能像这样访问它

hotel.bookingList.end_date

您必须遍历 bookingList 数组并访问 end_date。

<

form (ngSubmit) = "saveHotel()">
    
  <input type="text" name = "name" [(ngModel)]=" hotel.name" placeholder="Enter hotel name"/>
  <input type="text" name = "email" [(ngModel)]=" hotel.email" placeholder="Enter hotel email"/>
  <input type="text" name = "address1" [(ngModel)]=" hotel.address1" placeholder="Enter hotel address line 1"/>
  <input type="text" name = "address2" [(ngModel)]=" hotel.address2" placeholder="Enter hotel address line 2"/>
  <span *ngFor="let booking of  hotel.bookingList">
    <input type="text" name = "address2" [(ngModel)]=" booking.start_date" placeholder="Enter hotel address line 2"/>
    <input type="text" name = "address2" [(ngModel)]=" booking.end_date" placeholder="Enter hotel address line 2"/>
  </span>
      
  <button type="submit">Add Hotel</button>
</form>

如果您想动态地将预订添加到酒店。您可以有一个单独的按钮来将预订添加到 hotel.bookingList 数组。

<button type="submit" (click)="addHotelBooking()">Reset</button>
    
addHotelBooking = () => {
        this.hotel.bookingList.push({
          start_date: null,
          end_date: null 
        })
}