Angular 2+: 如何使用默认值使下拉菜单只读（或禁用）并在没有默认值时添加表单验证错误

Question

<mat-form-field class="">
  <mat-select placeholder="Lead Status" formControlName="leadStatusId" name="leadStatusId" id="leadStatusId" [formGroup]="form"
    required *appReadOnlyView>
    <mat-option *ngFor="let leadStatus of allLeadStatus" [value]="leadStatus?.leadStatusId">
      {{ leadStatus?.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

这是我的下拉菜单，我需要将此字段设置为只读并设置为默认值。如果没有设置默认值，则需要添加表单验证错误。我知道我们不能添加禁用验证，但我不知道如何使用 readonly

Answer 1

如您所知，表单验证将跳过具有只读属性的元素。要"force" 验证：

删除只读属性
进行验证
恢复只读属性

我没有 Angular 方面的经验，但我在 Vuejs 中使用了这个 jQuery 代码。所以我相信你可以利用这个：

var rr = $('#myform').find('[readonly][required]').prop('readonly', false);
$('#myform')[0].checkValidity();
rr.prop('readonly', true);

Answer 2

我不确定我是否完全理解这个问题，但据我所知，您希望为 select 设置一个默认值，如果是这种情况，请禁用控件，我'假设通过一些初始化代码，否则使该字段需要选项？由于我无权访问您的模块，我在这里做了一个简单的示例 https://stackblitz.com/edit/angular-puot72，它允许您切换正在设置的默认值和被禁用的字段，或者如果您没有设置该字段，则该字段将被启用通过验证...

所以您的 app.component.ts 代码看起来像...

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  allLeadStatus = [{ name: 'Jim', leadStatusId: 1} , { name:'Bob', leadStatusId: 2}, { name: 'Joe', leadStatusId: 3 }]

  leadStatus: any;
  disabled: boolean;

  ngOnInit()
  {
    //Whatever logic to init this...
    //this.leadStatus = this.allLeadStatus[0].leadStatusId;

    this.disabled = this.leadStatus || false;
  }
}

配合模板代码如下...

<form #myForm="ngForm">
  <select [(ngModel)]="leadStatus" #leadStatusId="ngModel" [disabled]="disabled" name="leadStatusId" required>
    <option *ngFor="let leadStatus of allLeadStatus"  [value]="leadStatus?.leadStatusId">
      {{ leadStatus?.name }}
    </option>
  </select>
<div class="error" *ngIf="leadStatusId?.errors?.required">Required Field</div>
</form>

我知道这确实专门解决了您的问题，但我希望它能引导您找到适合您的模块的解决方案。

Answer 3

我找到了解决方法来进行适当的验证。 https://stackblitz.com/edit/angular-zbibqx

Angular 2+: 如何使用默认值使下拉菜单只读（或禁用）并在没有默认值时添加表单验证错误

Angular 2+: How to make drop down menu readonly (or disable) with default value and add form validation error if no default value

angular-material

angular

angular-reactive-forms

angular6

angular7