Angular Reactive 表单控制所有报告 ng-valid 和父表单报告为 ng-valid 但提交仍然禁用，直到单击表单控件答案

【问题标题】：Angular Reactive form controls all report ng-valid and parent form reports as ng-valid but submit still disabled until clicking on a form controlAngular Reactive 表单控制所有报告 ng-valid 和父表单报告为 ng-valid 但提交仍然禁用，直到单击表单控件
【发布时间】：2021-09-16 16:12:09
【问题描述】：

希望我能在调试此应用程序时获得一些帮助。问题是提交按钮似乎与视图模型不同步。

例如，我有一个带有选择控件的表单，该控件是必填字段。选择选项是从 API 服务动态构建的，因此当表单加载时，选择已经具有预选选项集并且应该是有效的。

但是，提交按钮被禁用！启用提交按钮的唯一方法是简单地单击表单并手动设置选定的选项（即使它与表单加载时设置的选项相同）。此交互会导致提交启用。

在检查 HTML 表单 onload 时，该表单具有 ng-valid 样式，并且没有出现 ng-invalid。

什么会导致按钮与视图以及控件和父窗体的报告的 ng-valid 状态不同步？

【问题讨论】：

您可以添加一些您尝试过的代码示例

标签： angular angular-reactive-forms

【解决方案1】：

更改为响应式表单。会更容易修复。

Template.html
    <form [formGroup]="formName">
        <mat-form-field>
            <mat-label>LABEL</mat-label>
            <input matInput formControlName="controlName"/>
        </mat-form-field>
    </form>
    
    ...
       <button mat-raised-button color="primary" (click)="onSubmit()"
           [disabled]="fChildComponent?.invalid || f.invalid">SUBMIT</button>

组件.ts

@ViewChild(ChildComponent) child: ChildComponent;

get f(): FormGroup { return this.form; }
get fChildComponent(): FormGroup { return this.child.fchildForm }

然后你可以使孩子的状态无效。或者您可以使用自定义ControlValueAccessor, NG_VALUE_ACCESSOR and NG_VALIDATORS

【讨论】：

感谢您的回复。这是一个有角度的反应形式控件。