Question

我有一个定义FormGroup的Angular组件，它有一个嵌套的FormGroup作为其控件之一。

将子FormGroup作为@Input参数传递给子组件，并且在子FormGroup内的某些控件上有验证器。

出于某种原因，父 valid的{{1}}属性只有在更新子组件中的值后才会更新，然后随机更改其中一个输入对于父FormGroup（如为输入添加额外空格）。

设置相当复杂（根据某些条件，在子 FormGroup的控件中添加或删除验证器，这可能是验证不会自动发生的原因）。

如果孩子FormGroup中的任何内容发生变化，我该如何手动触发父FormGroup重新验证？我在 child 组件中尝试了这个：

FormGroup

这应该会在任何输入发生更改时触发ngOnInit() this.myForm.valueChanges.subscribe(val => { this.myForm.updateValueAndValidity({onlySelf: false, emitEvent: true}) }); FormGroup的重新验证，并将事件广播到child组件，这会触发父级的重新验证parent。我得到了某种堆栈溢出错误，因为这会导致无限循环。

如何触发父FormGroup自动重新验证？

Answer 1

我做了类似这样的事情，例如我的孩子表格组：

我的子表单组件：

match.Groups[1].Value

它的模板：

import { Component, Input } from "@angular/core";
import { FormGroup } from "@angular/forms";

@Component({
    selector: 'input-form-control',
    templateUrl: './input-form-control.component.html'
})
export class InputFormControlComponent {

    public formGroup: FormGroup;
    @Input('label') formControlLabel: string;
    @Input('controlId') formControlId: string;
    @Input('name') formControlName: string;
    @Input('type') formControlType: string;
    @Input('errorText') formControlErrorText: string;
    @Input('helpText') formControlHelpText: string;

    @Input('group')
    set formControl(group) {
        this.formGroup = group;
    }
    @Input('required') isRequired: boolean;
    @Input('value')
    set value(value: string) {
        this.currentValue = value;
        this.store({ value });
        this.setAsTouched();
    }
}
    get value(): string {
        return this.currentValue;
}
    @Output('valueChange') valueChange: EventEmitter<any> = new EventEmitter();

    setAsTouched() {
    this.formGroup.controls[this.formControlName].markAsTouched();
}
    store(data) {

    if (!this.formGroup.controls[this.formControlName]) {
        return;
    }
    if (data.value === EMPTY_ITEM) {
        this.formGroup.controls[this.formControlName].setValue('');
        this.valueChange.emit({ value: '' });
        return;
    }
    this.formGroup.controls[this.formControlName].setValue(data.value);
    this.valueChange.emit(data);

}
}

父模板中的

：

<form [formGroup]="formGroup" class="m-form m-form--fit">
    <div class="form-group m-form__group row" [ngClass]="{
                    'has-danger': formGroup.controls[formControlName].invalid && formGroup.controls[formControlName].touched,
                    'has-success': formGroup.controls[formControlName].valid && formGroup.controls[formControlName].touched,
                    'has-no-action': formGroup.controls[formControlName].untouched
                                }">
        <label class="col-form-label col-lg-3 col-sm-12" [for]="formControlId">
            {{formControlLabel}}
            <span *ngIf="isRequired" class="required" aria-required="true"> * </span>

        </label>
        <div class="col-lg-4 col-md-9 col-sm-12">
            <input [type]="formControlType || 'text'" class="form-control m-input" [formControlName]="formControlName" [name]="formControlName" [id]="formControlId" [placeholder]="formControlLabel" (click)="setAsTouched()" (valueChanged)="store($event)">
            <div class="form-control-feedback">{{formControlErrorText || 'Required Field May Not Be Empty'}}</div>
            <span class="m-form__help">{{formControlHelpText}}</span>
        </div>
    </div>
    <div class="form-group m-form__group"></div>
</form>

Answer 2

this.FormGroup.updateValueAndValidity（）;

updateValueAndValidity（）-这是带有FormGroup的默认方法

角度反应形式 - 当子FormGroup更改时手动触发父FormGroup的验证

2 个答案: