Formbuilder嵌套验证

Question

我在一个表单生成器中嵌套了一个表单生成器。

我只想验证name控件每个middleName、lastName和name控件，但是我似乎无法获得我的salesForm表单组的name控件。

我已经试过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>

Answer 1

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

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

同样，在您的html中，您有一个拼写错误：

g.firstName? -> f.firstName?

Answer 2

我通过访问formbuilder中的formbuilder找到了答案：

get g() { return (this.salesForm.get('name') as FormGroup).controls; }