0
votes

Comment activer ou désactiver le bouton d'envoi via le bouton radio angulaire

voici le code:

list.component.html

<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>
<button class="mr-1" nz-button nzType="primary" type="button" [disabled]="disableSubmitBtn()">
  <span translate>Submit</span>
</button>

Lorsqu'il sélectionne le réussi il devrait activer le bouton d'envoi s'il sélectionne le échec il devrait désactiver le bouton d'envoi

javascript typescript angular

4 commentaires

vous utilisez également formControlname et ngModel ensemble, ce qui n'est pas le bon moyen. vous devriez en utiliser un.

@Mridul si je supprime le formControlname et ngModel, il y aura une erreur d'ann

Vous devez en garder un en fonction de vos besoins :)

ok merci .. @Mridul

5 Réponses :

2
votes

juste un petit changement dans votre code

<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>
<button class="mr-1" nz-button nzType="primary" type="button" [disabled]="radioValue == 'failed'">
    <span translate>Submit</span>
</button>

2 commentaires

comment l'appliquer sur ts?

dans ce cas, vous devez prendre une variable sur votre exemple de fichier ts: isDisabled: boolean; et sur votre html [disabled] = "isDisabled" par défaut, ce sera faux. puis sous la fonction ngModelChange, vous devez vérifier la valeur du bouton radio si radioValue échoue, alors vous pouvez faire isDisabled = true;

1
votes

Vous pouvez essayer comme ceci

<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>
<button class="mr-1" nz-button nzType="primary" type="button" [disabled]="radioValue == 'passed' ? 'false' : 'true'">
  <span translate>Submit</span>
</button>

0 commentaires

1
votes

Vous pouvez attribuer une valeur vrai ou faux au bouton radio pour identifier la réussite ou l'échec. Et utilisez cette condition pour activer ou désactiver le bouton.

<nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue" (ngModelChange)="onChangeStatus($event)">
              <label nz-radio nzValue="true">Passed</label>
              <label nz-radio nzValue="false">Failed</label>
            </nz-radio-group>
<button class="mr-1" nz-button nzType="primary" type="button" [disabled]="nzValue" >
  <span translate>Submit</span>
</button>

0 commentaires

2
votes

Vous venez de modifier la ligne suivante

 <button class="mr-1" nz-button nzType="primary" type="button" [disabled]="!radioValue ? 'disabled': null">

0 commentaires

1
votes

Le moyen le meilleur et le plus efficace pour y parvenir est d'utiliser des validateurs personnalisés sous des formes angulaires.

passed: ['', [Validators.required, checkIfPassed]],
failed: ['', [Validators.required, checkIfPassed]],

Ensuite, utilisez ce validateur dans vos formes angulaires.

import { ValidationErrors, AbstractControl } from '@angular/forms';

export class CustomValidator{
    static checkIfPassed (control: AbstractControl): ValidationErrors | null {
        if (control.value == 'passed') {
            return { shouldbepassed: true }
        }
        return null;
    }
}

0 commentaires