web-dev-qa-db-fra.com

Faire du bouton radio mat un champ obligatoire dans un formulaire

J'utilise un formulaire en Angular 6, et je désactive le bouton soumettre à cette condition:

<button tabindex="-1" mat-raised-button class="submit-btn" color="primary" type="submit" [disabled]="!EditItemForm.form.valid || !quantityIsValid(newQuantity.value)">Save</button>

J'en ai 2 mat-radio-button champs à l'intérieur d'un mat-radio-group, et je souhaite désactiver le bouton d'envoi si aucun des boutons radio n'est sélectionné.

Voici ce que j'ai essayé:

<form #EditItemForm="ngForm" (ngSubmit)="save(newQuantity.value)">
    <mat-radio-group>
        <mat-radio-button (click)="setType('Consumable')" value="1" #consumable name="consumable" required>Consumable</mat-radio-button>
        <mat-radio-button (click)="setType('Returnable')" value="2" #returnable name="returnable" required>Returnable</mat-radio-button>
    </mat-radio-group>

    <mat-form-field>
        <input matInput [ngModel]="data.quantity" name="newQuantity" #newQuantity placeholder="Quantity"
            type="number" required>
    </mat-form-field>

    <mat-dialog-actions>
        <button tabindex="-1" mat-raised-button [mat-dialog-close]="false">Cancel</button>
        <button tabindex="-1" mat-raised-button class="submit-btn" color="primary" type="submit" [disabled]="!EditItemForm.form.valid || !quantityIsValid(newQuantity.value)">Save</button>
    </mat-dialog-actions>
</form>

J'ai donc créé les boutons radio mat requis, j'ai également essayé de rendre le groupe radio mat requis, mais les deux ne fonctionnent pas.

Cependant, si je ne sélectionne pas de bouton radio et que je tape une quantité, le formulaire apparaîtra valide et activera le bouton d'envoi. Mais, je ne veux pas que le bouton d'envoi soit activé quand aucun bouton radio n'est sélectionné, alors comment faire?

Merci

angularradio-buttonradio-group
6
Michael

Vous devez ajouter un ngModel & name à votre mat-radio-group. Les Als font le groupe requis au lieu du mat-radio-buttons:

<form #EditItemForm="ngForm" (ngSubmit)="save(1)">
    <mat-radio-group required [ngModel]="selectedRadio" name="radio">
        <mat-radio-button (click)="setType('Consumable')" value="1">Consumable</mat-radio-button>
        <mat-radio-button (click)="setType('Returnable')" value="2">Returnable</mat-radio-button>
    </mat-radio-group>

   <button tabindex="-1" mat-raised-button class="submit-btn" color="primary" type="submit" [disabled]="!EditItemForm.valid">Save</button>
</form>

<p>Form valid: {{ EditItemForm.valid }}</p>

J'ai exclu le contrôle quantity pour plus de simplicité. selectedRadio n'est qu'une chaîne

5
Tim Martens

Vous devez enregistrer vos contrôles lorsque vous utilisez un formulaire basé sur un modèle. Les contrôles doivent avoir une directive name et ngModel sur eux pour les lier au formulaire.

les corrections sont indiquées ci-dessous:

<mat-radio-group name="radioControl" ngModel>
    <mat-radio-button (click)="setType('Consumable')" value="1" #consumable name="consumable" required>Consumable</mat-radio-button>
    <mat-radio-button (click)="setType('Returnable')" value="2" #returnable name="returnable" required>Returnable</mat-radio-button>
</mat-radio-group>
0
rgantla