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

Question

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

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

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

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

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

Answer 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>

component.ts

@ViewChild(ChildComponent) child: ChildComponent;

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

那么你可以使child的状态无效。或者您可以自定义 ControlValueAccessor, NG_VALUE_ACCESSOR and NG_VALIDATORS

Angular 反应式表单控制所有报告 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 control

angular

angular-reactive-forms