将 [(ngModel)] 添加到单选按钮组后，默认的 [checked] 不再有效 [英] After adding [(ngModel)] to a radio button group, the default [checked] no longer works

问题描述

我正在开发一个可重用的小型组件，它可以为单选按钮设置样式并发出选定的值.

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";@成分({模块 ID:module.id，选择器:'按钮选择'，模板:`<div class="toggle-group"><div *ngFor="让选择的选择"><输入类型=收音机"id="{{ 组名 + 选择 }}"name="{{groupName}}"价值="{{选择}}"[选中]="选择 === 默认选择"[(ngModel)]="值"(ngModelChange)="选择($event)"/><label class="toggle-button"for="{{ groupName + choice }}">{{ choice }}

</div>`,样式网址:['editableField.css','buttonSelect.css']})导出类 ButtonSelectComponent 实现 OnInit {@Input() 选择:string[];@Input() defaultChoice: 字符串；@Input() 组名:字符串；@Input() 值:字符串；@Output() valueChosen: EventEmitter= new EventEmitter();ngOnInit() {this.choose(this.defaultChoice);}私人选择(值:字符串){this.valueChosen.emit(value);}}

组件是这样实现的:

之前将 [(ngModel)]="value" (ngModelChange)="choose($event)" 添加到按钮选择组件中，[checked]="choice === defaultChoice" 指令正确设置了相关 <input/> 上的 checked 属性.

添加[(ngModel)]后，只有 ng-reflect-checked="true"被设置，这会阻止视觉样式显示默认值(因为我的 CSS 使用了伪选择器).

为 [ngModel] 更改 [(ngModel)] 没有效果.

为什么会发生这种情况，我该如何解决?

解决方案

我认为，你不需要这个 [checked]="choice === defaultChoice".试试这个:

当 [value] = [(ngModel)] 选择收音机时.

I'm working on a small reusable Component which styles radio buttons and emits the selected values.

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

The component is implemented like so:

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

Before adding [(ngModel)]="value" (ngModelChange)="choose($event)" to the button-select Component, the [checked]="choice === defaultChoice" directive correctly set the checked attribute on the relevant <input />.

After adding the [(ngModel)], only ng-reflect-checked="true" gets set, which prevents the visual styling from showing the default value (since my CSS uses a pseudo-selector).

Changing [(ngModel)] for [ngModel] had no effect.

Why did this happen and how can I fix it?

解决方案

I think, you don't need this [checked]="choice === defaultChoice". Try this :

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

When [value] = [(ngModel)] the radio is selected.

这篇关于将 [(ngModel)] 添加到单选按钮组后，默认的 [checked] 不再有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！