Angular: управлять несколькими неограниченными одинаковыми формами на одной странице

Question

Мне нужна страница с формой и кнопкой «Добавить», которая создает еще одну точно такую ​​же форму (пустую)

Я боролся с разными проблемами. Вот что я сделал до сих пор:

<form>
    <div *ngFor="let car of cars; let i = index">
    <label>Brand</label>
    <input #text="ngModel" type="text" name="brand[i]" [(ngModel)]="car.brand">
    <label></label>
    <input #text="ngModel" type="text" name="size[i]" [(ngModel)]="car.size">
</div>
<button type="button" (click)="onAddCar(form)">Add Car</button>
</form>

мой tsFile выглядит примерно так:

cars : Car[] = [];
myFirstCar = new Car();
myFirstCar.brand = '';
myFirstCar.size = '';
cars.push(myFirstCar);


ngOnInit{
     this.carService.getCars() .subscribe(response => { this.cars= response; });
}
onAddCar() {
    myNewCar = new Car();
    myNewCar.brand = '';
    myNewCar.size = '';
cars.push(myNewCar);

Вот мои проблемы:

• когда я получаюавто на нач. Независимо от того, насколько велик мой список, одна и та же машина все время отображается
• , когда я нажимаю добавить машину, все поля устанавливаются в ноль вместо того, чтобы сохранять то, что я делал до сих пор.

Как я мог это сделать?

Answer 1

Вам нужно разделить отображение списка ваших автомобилей и ввод.

, когда я получу свои машины в Init. Независимо от того, насколько велик мой список, одна и та же машина отображается постоянно

Вы хотите проверить, действительно ли ваш метод carService.getCars () возвращает что-либо. У вас также есть пробел между .getCars () и .subscribe

, когда я нажимаю добавить Car, все поля устанавливаются в ноль вместо того, чтобы сохранять то, что я делал до сих пор. В своем коде вы пытаетесь передать «форму» методу. Но подпись вашего метода onAddCar () вообще не принимает никаких параметров.

Вот как я бы изменил ваш код. Это не идеально, но я думаю, что это полезно для вас. В шаблоне HTML:

<form>
    <div *ngFor="let car of cars;">
        <label>Brand</label>
        <input type="text" name="carbrand" [value]="car.brand">
        <label></label>
        <input type="text" name="carsize" [value]="car.size">
    </div>
</form>

<input type="text" name="carbrand" [(ngModel)]="brand">
<input type="text" name="carsize" [(ngModel)]="size">
<button type="button" (click)="onAddCar(brand, size)">Add Car</button>

В файле ts:

cars : Car[] = [];
brand:string = '';
size:string = '';
ngOnInit(){
    this.carService.getCars().subscribe(response => { this.cars= response; });
}

onAddCar(brand:string, size:string) {
    var myNewCar = new Car(brand,size);
    this.cars.push(myNewCar);
}

Надеюсь, это поможет.