Question

我正在与Angular合作进行酒店项目。我的预订屏幕以模式显示。输入是根据成人和儿童的人数自动生成的。但是，当我写输入时，出现错误“找不到路径为'adultArray'的控件或找不到路径为'childArray'的控件。我该如何解决？

.html

<div class="container mt-4">
    <div class="row">
        <ng-container formArrayName="adultArray">
                <div *ngFor="let adult of rezForm.controls.adultArray?.value; let i = index" class="col-md-6 ">
                    <ng-container [formGroupName]="adult">
                        <div class="form-group input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Yetişkin</span>
                            </div>
                            <input class="form-control" formControlName="nameSurname" placeholder="Adı Soyadı" type="text" />
                        </div>
                        <div class="form-group input-group">
                            <div class="input-group-prepend ">
                                <span class="input-group-text">Yetişkin</span>
                            </div>
                            <input class="form-control" formControlName="birthday" placeholder="Doğum Tarihi" type="text" />
                        </div>
                    </ng-container>
                </div>
        </ng-container>
    </div>
</div>
<div class="container mt-4">
    <div class="row">
        <ng-container formArrayName="childArray">
            <div *ngFor="let chd of rezForm.controls.childArray?.value; let i = index" class="col-md-6">
                <ng-container [formGroupName]="chd">
                    <div class="form-group input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Çocuk</span>
                        </div>
                        <input class="form-control" formControlName="nameSurname" placeholder="Adı Soyadı" type="text" />
                    </div>
                    <div class="form-group input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Çocuk</span>
                        </div>
                        <input class="form-control" formControlName="birthday" placeholder="Doğum Tarihi" type="text" />
                    </div>
                </ng-container>
            </div>
        </ng-container>
    </div>

.ts

 rezForm: FormGroup;
rezervasyon: Rezervasyon;

constructor(
    private hotelservice: HotelService,
    private fb: FormBuilder,
    public dialogRef: MatDialogRef<RezervasyonComponent>
) { }



createRezervasyon() {
    this.rezForm = this.fb.group({
        adultArray: this.fb.array([]),
        childArray: this.fb.array([]),
        price: ["", Validators.required],
        hotelName: ["", Validators.required],
        roomName: ["", Validators.required],
        checkInDate: ["", Validators.required],
        payDate: ["", Validators.required],
        duration: ["", Validators.required]
    });
}

ngOnInit() {

    this.createRezervasyon();

    of(this.hotel).subscribe(
        data => {
            console.log(data);

            var adultCount = data.numberOfAd;
            let adultArray = this.rezForm.controls.adultArray as FormArray;
            let adult: any = {
                "nameSurname": "",
                "birthday": ""
            };

            for (let i = 0; i < adultCount; i++) {
                adultArray.push(this.fb.group(adult));
            }

            var childCount = data.numberOfChd;
            let childArray = this.rezForm.controls.childArray as FormArray;
            let child: any = {
                "nameSurname": "",
                "birthday": ""
            };

            for (let i = 0; i < childCount; i++) {
                childArray.push(this.fb.group(child));
            }

            this.rezForm.patchValue({
                hotelName: data.hotelName,
                price: data.price,
                roomName: data.roomName,
                checkInDate: data.checkInDate,
                payDate: data.payDate,
                duration: data.duration,
            });
        },
        err => {
            console.error("Hata oluştu: ", err);
        }
    );

Answer 1

1.-使用* ngIf避免出现初始错误

<form *ngIf="rezForm" [formGroup"]="rezForm>
   ...
</form>

2.-遍历rezForm.get（'childArray'）。controls，而不遍历“ value”（*）

<div *ngFor="let chd of rezForm.get('childArray').controls; let i = index">

否则，您将无法集中精力

（*）在生产中，您需要使用吸气剂来返回FormArray

get childArray()
{
    return this.rezForm.get('childArray') as FormArray
}

    <div *ngFor="let chd of childArray.controls; let i = index">

已更新，但问题是您已写信

<ng-container [formGroupName]="adult">

必须

<ng-container [formGroupName]="i"> //<--use "i", the let i=index
//or
<ng-container [formGroup]="adult"> //<--use "formGroup" the *ngFor="let adult of ..

我看到的另一个问题是，当您编写代码时（但这是我的偏好，您的代码可以工作）

let adultArray = this.rezForm.controls.adultArray as FormArray;
// I prefer
const adultArray = this.rezForm.get("adultArray") as FormArray;

查看stackblitz with your code

找不到路径角度的控制

1 个答案: