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>

这是我的下拉菜单，在此我需要将该字段设置为只读并将其设置为默认值。如果未设置默认值，则需要添加表单验证错误。我知道我们无法在禁用状态下添加验证，但我不知道如何使用只读方式进行验证

Answer 1

您已经知道，表单验证将跳过具有readonly属性的元素。要“强制”验证：

删除只读属性
进行验证
还原只读属性

我没有Angular的经验，但是我在Vuejs中使用此jQuery代码。因此，我相信您可以利用：

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

Answer 2

我不确定我是否完全理解这个问题，但是从我收集到的信息中，您希望为select设置一个默认值，并在这种情况下禁用该控件，我通过一些init假设代码，否则使该字段为必填选项？由于我无权访问您的模块，因此在这里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+：如何将下拉菜单设为具有默认值的只读（或禁用）并在没有默认值的情况下添加表单验证错误

3 个答案: