Material Angular 中的自动完成字段验证 5

Question

我们正在使用 Angular material 开发我们的 Angular 5 应用程序。我们有 2 组 4 个类似的自动完成类型字段。我们已经实现了使用 Material 自动完成字段。

第一组 4 个字段用于获取客户详细信息。第二组字段获取客户详细信息，但第二组字段的可见性是可选的，由复选框控制。该功能运行良好。但是当我通过 tag:MatAutocompleteTrigger 订阅实施强制选择时，第一组字段工作正常。而加载的第二组字段应该仅在复选框被选中时不可见，第二组字段将变得可见。

由于出现错误，我将代码片段放在发生错误的地方。我在这里只显示一个字段 altCustomerName 和 id altCustomerNameId。我试图在 tag:ngOnInit 上将此 id 值设置为 true，并在 tag:ngAfterViewInit 上设置为 false。但这也以错误告终。

HTML（查看）

<mat-form-field>
     <input placeholder="Customer Name" type="text" #altCustomerNameId matInput [formControl]="altCustomerNameControl" [(ngModel)]='selectedAltCustomerName' [matAutocomplete]="altCustomerName" required>
     <mat-autocomplete #altCustomerName="matAutocomplete" class='customerDetails'>
        <mat-option (click)="setAltCustomerDetails(altCustomer)" *ngFor="let altCustomer of filteredAltCustomersByName | async" [value]="altCustomer.name">
                    {{ altCustomer.custnum + ' ' + altCustomer.name + ' '+ altCustomer.countryname }}
        </mat-option>
     </mat-autocomplete>
</mat-form-field>

组件代码：（在 class 内声明了 altCustomerNameControl）enter code here

@ViewChild('altCustomerNameId', {
            read: MatAutocompleteTrigger
})
altCustomerNameTrigger: MatAutocompleteTrigger;
        ..
        ....
        ....
ngAfterViewInit() {
    this._subscribeToClosingActions();
}
ngOnDestroy() {
      ....
   if(this.altCustomerNameSubscription &&
       !this.altCustomerNameSubscription.closed)
    .....
}

this.altCustomerCodeSubscription = this.altCustomerCodeTrigger.panelClosingActions.subscribe(
   event => {
      if (!event || !event.source) {
          this.altCustomerNameControl.setValue('');
          this.altCustomerCodeControl.setValue('');
          this.selectedAltCustomerName = '';
          this.selectedAltCustomerCode = '';
          this.selectedAltCustomerCountry = '';
       }
   },err => this._subscribeToClosingActions(),
      () => this._subscribeToClosingActions()
);

如果您需要对代码进行任何说明，请告诉我。

Answer 1

我们使用 *ngIf 来显示或隐藏基于复选框选择的部分。使用 [style.display] 进行修改，如下面的代码解决了上述问题。

旧代码：（控制部分可见性）

    <div class="row" **ngIf='optAlternativeCustomer'*>

新代码：（修改部分可见性如下）

    <div class="row" *[style.display]="!optAlternativeCustomer?'none':'flex'"*>

Material Angular 中的自动完成字段验证 5

Material Autocomplete field validation in Angular 5

angular5

angular-material-5