0
votes

Angular 2+: Comment créer un menu déroulant en lecture seule (ou désactiver) avec la valeur par défaut et ajouter une erreur de validation de formulaire si aucune valeur par défaut

<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>
this is my dropdown where I need to make this field readonly and set to default value. If no default value to set, it need to add form validation error.
I know we can't add validation with disabled, but I don't know how to do it with readonly

angular angular-material angular6 angular-reactive-forms angular7

0 commentaires

3 Réponses :

0
votes

Comme vous le savez déjà, la validation du formulaire ignorera l'élément avec l'attribut en lecture seule. Pour "forcer" la validation:

Supprimer l'attribut en lecture seule
Faites la validation
Restaurer l'attribut en lecture seule

Je n'ai pas d'expérience sur Angular mais j'utilise ces codes jQuery dans Vuejs. Je pense donc que vous pouvez utiliser ceci:

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

0 commentaires

0
votes

Je ne suis pas sûr de bien comprendre la question, mais d'après ce que je comprends, vous aimeriez avoir une valeur par défaut définie pour le select et avoir le contrôle désactivé si tel est le cas, je suppose par le biais d'un init code, sinon rendre le champ obligatoire avec des options? Comme je n'ai pas accès à vos modules, j'ai fait un exemple simple ici https://stackblitz.com/ edit / angular-puot72 qui vous permet de basculer entre une valeur par défaut définie et le champ étant désactivé ou si vous ne l'avez pas défini, le champ serait activé avec validation ...

Donc, votre application. Le code component.ts ressemblerait à ...

<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>

Avec le code de modèle comme suit ...

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;
  }
}

I sachez que cela résout spécifiquement votre problème, mais j'espère que cela vous mènera vers une solution qui correspond à vos modules.

3 commentaires

la liste déroulante est toujours désactivée et la valeur de la liste déroulante est définie en fonction de la propriété de valeur par défaut, si l'une des valeurs n'a pas de valeur par défaut, elle devrait afficher une erreur de validation! J'ai trouvé un moyen de contourner cela pour afficher l'erreur de validation comme réponse ci-dessous!

Oh, ok ... Je veux dire pourquoi même en faire une liste déroulante si elle va toujours être désactivée?

Je sais, cela faisait partie de l'exigence!

0
votes

J'ai trouvé du travail pour mettre en place la validation. https://stackblitz.com/edit/angular-zbibqx

0 commentaires