Выпадающий объект ngmodel в раскрывающемся списке angular materror check действителен

Question

Добрый день,

Обычно я устанавливаю значение раскрывающегося списка в строку, например:

      <mat-form-field>
   <mat-select name="searchReloadType2" placeholder="reload to" required #searchReloadType2="ngModel"
      [(ngModel)]="reloadTypeObjStr" >
      <mat-option [value]="rReloadType.key" *ngFor="let rReloadType of reloadTypeList">{{ rReloadType.label }}
       </mat-option>
   </mat-select>
    <mat-error *ngIf="!searchReloadType2.valid">
        reloadTo is required
    </mat-error>
  </mat-form-field>

Где rReloadType.key это значение из раскрывающегося списка, которое установлено на reloadTypeObjStr, и если пользователь щелкнет раскрывающийся список, но не выбрал какое-либо значение, отобразится "reloadTo is required" под выпадающим там.

Я хочу иметь раскрывающийся список, в котором значение объекта вместо строки, например:

           <mat-form-field>
       <mat-select name="searchReloadType" placeholder="reload to" required #searchReloadType="ngModel"
          [(ngModel)]="reloadTypeObj" >
          <mat-option [value]="rReloadType" *ngFor="let rReloadType of reloadTypeList">{{ rReloadType.label }}
           </mat-option>
       </mat-select>
        <mat-error *ngIf="!searchReloadType.valid">
            reloadTo is required
        </mat-error>
      </mat-form-field>

где rReloadType это объект (вместо string) из раскрывающегося списка и установите reloadTypeObj, который является объектом. На этом этапе, если пользователь не выбрал какое-либо значение из этого раскрывающегося списка, reloadTo is required не будет отображаться, ошибка mat на этом этапе не работает.

Я хотел бы попросить совета, могу ли я что-нибудь для этого сделать? Или angular это не поддерживает? Я должен использовать строковое значение вместо значения объекта для раскрывающегося списка?

Answer 1

Надеюсь, у тебя все хорошо.

Я попытался воспроизвести вашу проблему, и в обоих случаях она работает нормально, я не вижу здесь никакой проблемы. https://stackblitz.com/edit/angular-mat-form-field-fbtask?file=app%2Fform-field-prefix-suffix-example.html

Кроме того, я бы посоветовал вам использовать searchReloadType.errors?.requiredвнутри матовой ошибки вместо !searchReloadType.valid. Таким образом, вы также можете использовать errors?.required, errors?.patternпроверить шаблон, errors?.minlengthа также errors?.maxlengthи т. д. Это было бы более полезно, когда вы имеете дело с различными входными данными.

Мир вне.