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

Я не уверен, что полностью понимаю вопрос, но из того, что я понял, вы хотели бы установить значение по умолчанию для выбора и отключить элемент управления, если это так, я предполагаю, через некоторый 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 2

Я нашел работу, чтобы получить подтверждение на месте.https://stackblitz.com/edit/angular-zbibqx

Answer 3

Как вы уже знаете, проверка формы пропустит элемент с атрибутом readonly.Для принудительной проверки:

1. Удалите атрибут readonly
2. Выполните проверку
3. Восстановите атрибут readonly

Я не знаюУ меня нет опыта работы с Angular, но я использую этот код jQuery в Vuejs.Поэтому я считаю, что вы могли бы использовать это:

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