1
votes

Comment rendre le bouton d'envoi activé en angulaire

voici le code:

list.component.html

if (!this.otherRemark) {
    return true;
}

list.component.ts

  disableSubmitBtn() {
       if (!this.otherRemark) {
          return true;
       }
  }

comment activer le bouton d'envoi lors de la sélection du réussi code> en angulaire.

Ce que je veux, après avoir sélectionné le passé sur le bouton radio il devrait activer le code> bouton d'envoi s'il sélectionne le a échoué le bouton est désactivé où il doit remplir les remarques en premier qui est le textarea où la fonction disableSubmit()

    <nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue" (ngModelChange)="onChangeStatus($event)">
                  <label nz-radio nzValue="passed">Passed</label>
                  <label nz-radio nzValue="failed">Failed</label>
    </nz-radio-group>

    <div *ngIf="radioValue ==='failed'>
       <textarea nz-input placeholder="Remarks" class="remarks-textarea" type="text" name="otherRemark"
              formControlName="otherRemark" [(ngModel)]="otherRemark"
              [nzAutosize]="{ minRows: 3, maxRows: 3 }"></textarea>
    </div>
    <button class="mr-1" nz-button nzType="primary" type="button" [disabled]="disableSubmitBtn()"
      [nzLoading]="formLoading" (click)="saveFormData()">
      <span translate>Submit</span>
    </button>

merci d'avance

javascript typescript angular

0 commentaires

4 Réponses :

1
votes

Vous utilisez [(ngModel)] = "radioValue" Donc valeur d'option avec update ngModel

Essayez ceci:

disableSubmitBtn() {
  if (this.otherRemark.length == 0 || this.radioValue != "passed" ) {
    return true;
  } else if(this.radioValue = "passed" ) {
    return false;      
  }
}

5 commentaires

la valeur de this.radioValue est radioValue: any ?

C'est à vous de décider, si vous voulez utiliser strimg

Comment à propos de la zone de texte lorsqu'elle se remplit, elle doit activer le bouton d'envoi

Utilisez this.otherRemark.length == 0 pour désactiver le bouton (Modification de ma réponse)

il n'a pas activé le bouton d'envoi

1
votes

Essayez ceci:

 <button [disabled]="radioValue === 'passed' ?  !(radioValue === 'passed') : !(radioValue === 'failed' && otherRemark)" class="mr-1" nz-button nzType="primary" type="button" 
    [nzLoading]="formLoading" (click)="saveFormData()">
      <span translate>Submit</span>
 </button>

4 commentaires

nous pouvons le simplifier par le [disabled] = "radioValue! == 'passé'" cela réduira le code.

@jithil, veuillez relire la question! Il y a deux cas en fait. 1. Le bouton doit être activé lorsque la valeur du bouton radio est «passée» 2. Le bouton doit être activé si la valeur du bouton radio est «échoué» et qu'une remarque est entrée

Il est encore plus facile d'ajouter d'autres chaînes. [disabled] = "(radioValue! == 'passé') || (radioValue! == 'failed' &&! otherRemark)"

@jithil, cela ne fonctionnera pas. Vérifiez s'il vous plaît! (radioValue! == 'pass') => ceci renvoie aussi vrai en cas d'échec de la valeur radio.

1
votes

disableSubmitBtn() {
  if (this.radioValue === 'passed') {
    return false;
  } else if (!this.otherRemark) {
    return true;
  }
}
It may help you

0 commentaires

1
votes

Le moyen le plus simple que je suivrai sera quelque chose comme ceci: [disabled] = "(radioValue! == 'pass') || (radioValue! == 'failed' &&! otherRemark)"

Cela ajoutera l'activation du bouton tandis que la valeur radio n'est pas passé . Donc, si l’utilisateur sélectionne d’autres valeurs que le passé , il est désactivé.

exemple HTML complet:

<button [disabled]="(radioValue !== 'passed') || (radioValue !=='failed' && !otherRemark)" class="mr-1" nz-button nzType="primary" type="button" [nzLoading]="formLoading" (click)="saveFormData()">
      <span translate>Submit</span>
 </button>

0 commentaires