Après l'ajout de [(ngModel)] à un groupe de boutons radio, la valeur par défaut [vérifié] ne fonctionne plus

Je suis en train de travailler sur un petit Composant réutilisable qui les styles de boutons radio et émet des valeurs sélectionnées.

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";

@Component({
    moduleId: module.id,
    selector: 'button-select',
    template: `<div class="toggle-group">
                    <div *ngFor="let choice of choices">
                        <input type="radio"
                               id="{{ groupName + choice }}"
                               name="{{groupName}}"
                               value="{{ choice }}"
                               [checked]="choice === defaultChoice"
                               [(ngModel)]="value"
                               (ngModelChange)="choose($event)" />
                        <label class="toggle-button"
                               for="{{ groupName + choice }}">{{ choice }}</label>
                    </div>
                </div>`,
    styleUrls: [
        'editableField.css',
        'buttonSelect.css'
    ]
})

export class ButtonSelectComponent implements OnInit {
    @Input() choices: string[];
    @Input() defaultChoice: string;
    @Input() groupName: string;
    @Input() value: string;

    @Output() valueChosen: EventEmitter<any> = new EventEmitter();

    ngOnInit() {
        this.choose(this.defaultChoice);
    }

    private choose(value: string) {
        this.valueChosen.emit(value);
    }
}

Le volet est mis en œuvre comme suit:

<button-select #statusFilter
               [choices]="['All', 'Active', 'Draft']"
               [defaultChoice]="'All'"
               [groupName]="'statusFilter'"
               (valueChosen)="filterChosen('statusFilter', $event)"
</button-select>

Avant ajoutant [(ngModel)]="value" (ngModelChange)="choose($event)" le bouton sélectionner un Composant, la [checked]="choice === defaultChoice" directive définir correctement le checked attribut sur le <input />.

Après l'ajout de la [(ngModel)], seulement ng-reflect-checked="true" est défini, ce qui empêche le style visuel de montrer la valeur par défaut (depuis mon CSS utilise un pseudo-sélecteur).

Changer [(ngModel)] pour [ngModel] a eu aucun effet.

Pourquoi cela est arrivé et comment puis-je résoudre ce problème?

  • Bref préavis, le nom de l'attribut que vous avez utilisé: name="{{groupName}}" de ne pas encapsuler votre radio-groupe. Vous serez en mesure de naviguer vers une autre radio-bouton dans un autre radio-groupe sur la même page en utilisant les flèches de votre-clés une fois que vous onglet à radio-groupe. La raison en est que Angulaires de ne pas ajouter la name attribut lui-même, mais ng-reflect-name.
InformationsquelleAutor msanford | 2017-02-24
  1. 25

    Je pense, vous n'avez pas besoin de cette [checked]="choice === defaultChoice". Essayez ceci :

    <input type="radio"
       id="{{ groupName + choice }}"
       name="{{groupName}}"
       [value]="choice"
       [(ngModel)]="defaultChoice"
       (ngModelChange)="choose($event)" />

    Quand [value] = [(ngModel)] la radio est sélectionnée.

    • C'est tout à fait correct! J'avais ajouté [checked] au début avant de penser à ajouter le [(ngModel)] et de ne jamais le remettre en question. Je vous remercie.
    • vous êtes les bienvenus 🙂
    InformationsquelleAutor mickdev
  2. 1

    J'ai été capable de dégager de la valeur et de conserver la valeur par défaut de style avec un minimum de changements en modifiant l'entrée du modèle:

    <input type="radio"
       id="{{ groupName + choice }}"
       name="{{groupName}}"
       value="{{ choice }}"
       [checked]="choice === defaultChoice"
       (click)="choose($event['target']['value'])" />

    ...ce que je trouve assez hacky. Il également n'a pas d'expliquer pourquoi l'ajout de données/propriété de la liaison qu'elle a éclaté, donc je suis ouvert à d'autres suggestions.

    InformationsquelleAutor msanford