1

我在表单构建器中有表单构建器 - 嵌套。

我只想验证每个firstName,middleName和lastName控件的name控制，但我似乎无法name控制我的salesForm表单组。

我已经尝试过 get f() { return this.salesForm.name.controls; }了，但没有成功。

this.salesForm = this.fb.group({
    id: ['', Validators.required],
    name: this.fb.group({
        firstName: ['', Validators.required],
        middleName: ['', Validators.required],
        lastName: ['', Validators.required],
    }),
    email: ['', [Validators.email, Validators.required]],
    address: ['', Validators.required],
    contactNo: ['', Validators.required],
});

get f() { return this.salesForm.controls; }

这是我的 HTML 文件。


<div class="form-row" formGroupName="name">

    <div class="form-group col-md-4">
        <label>First Name*</label>
        <input type="text" class="form-control" formControlName="firstName"
            [ngClass]="{ 'is-invalid': submitted && g.firstName.errors }">
        <!-- <div *ngIf="submitted && g.firstName?.errors" class="invalid-feedback">
                <div *ngIf="g.firstName?.errors.required">First Name is required</div>
            </div> -->
    </div>

    <div class="form-group col-md-4">
        <label>Middle Name*</label>
        <input type="text" class="form-control" formControlName="middleName"
            [ngClass]="{ 'is-invalid': submitted && f.middleName?.errors }">
        <div *ngIf="submitted && f.middleName?.errors" class="invalid-feedback">
            <div *ngIf="f.middleName.errors?.required">Middle Name is required</div>
        </div>
    </div>

    <div class="form-group col-md-4">
        <label>Last Name*</label>
        <input type="text" class="form-control" formControlName="lastName"
            [ngClass]="{ 'is-invalid': submitted && f.lastName?.errors }">
        <div *ngIf="submitted && f.lastName?.errors" class="invalid-feedback">
            <div *ngIf="f.lastName?.errors.required">Last Name is required</div>
        </div>
    </div>
</div>
4

2 回答 2

2 
get f() {
    return (this.salesForm.controls.name as FormGroup).controls;
}

您必须f()像上面一样更新您的方法。

同样在您的 html 中，您有一个错字：

g.firstName?->f.firstName?

于 2020-07-27T02:51:05.003 回答
2

我找到了使用它来访问表单构建器中的表单构建器的答案：

get g() { return (this.salesForm.get('name') as FormGroup).controls; }
于 2020-07-27T02:59:06.787 回答