为什么角度形式验证部分有效？

Question

我的代码位于here。

当按钮被按下时，网页会弹出一个模式。

问题是：

1. 在“分部”中选择一项
2. 在“系统”下拉框中选择一个项目。
3. 应该显示“form.valid=true”
4. 清空“分部”输入框，则“系统”下拉框清空。
5. 虽然错误信息显示为“需要部门名称”， 消息“form.valid=true”仍会显示。

我希望显示消息“form.valid=false”，但是，它显示消息“form.valid=true”。 我该如何解决这个问题？

。

Answer 1

虽然 JB Nizet 的评论非常准确，但我认为你的解决方案还有一步。

使用ControlValueAccessor 时，您为组件(app-division-list-input-box) 提供了一种与Forms API 通信的方式。

因此，您不希望在输入中仅具有必需属性，该属性位于app-division-list-input-box'中的观点。那是因为input 只是一个 DOM 元素，但它并不直接与其父表单容器通信。 因此，您应该在app-division-list-input-box 上定义required 验证器，以便定义必需的验证器。

manual-contact-editor.component.html

<app-division-list-input-box
    name="division"
    [(ngModel)]="this.callTreeManualContactMapping.division"
    required
    [divisionList]="this.divisionList">
  </app-division-list-input-box>

但是，这还不够。

因为，当您更改input 的内容时，app-division-list-input-box 不会通知其父表单容器。

每当用户在输入中键入内容时，您都必须调用onChange：

division-list-input-box.component.html

<mat-form-field>
    <mat-label>Division</mat-label>
    <input 
        matInput 
        type="text" 
        [(ngModel)]="division" 
        (ngModelChange)="onChange($event)"
        [matAutocomplete]="divisions"
        name="division2" 
        [divisionValidator]="this.divisionList" 
        (ngModelChange)="autoCompleteFilter($event)"
        #division2="ngModel"
    >
    <!-- ... -->
</mat-form-field>

StackBlitz.