0

我的代码位于此处。

按下按钮时，网页将弹出一个模式。

问题是：

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

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

.

4

1 回答 1

0

尽管 JB Nizet 的评论非常准确，但我认为您的解决方案还有一步。

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

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

手册-联系-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每当用户在输入中键入内容时，您都必须调用：

部门列表输入框.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>

堆栈闪电战。

于 2020-01-10T14:39:29.907 回答