angular - 如何在 Angular 2中绑定(bind)双向单选按钮

标签 angular

这是我的代码,在姓氏中,我使用了 ngModel,因此它可以进行双向数据绑定(bind),但在单选按钮中,我如何使用 ngModel 进行双向数据绑定(bind)。

   <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !lastname.valid }">
                    <label for="lastname">Last Name</label>
                    <input type="text" class="form-control" name="last_name" [(ngModel)]="employee.last_name" #lastname="ngModel" required />
                    <div *ngIf="f.submitted && !lastname.valid" class="help-block">Last Name is required</div>
                </div>
                <div class="form-group">
                    <label>Gender:</label> &nbsp;
                    <label class="radio-inline">
                    <input type="radio" name="optradio" [checked]="employee.gender == 'Male'" >Male
                </label>
                    <label class="radio-inline">
                     <input type="radio" name="optradio" [checked]="employee.gender == 'Female'" >Female
                </label>
                </div>

最佳答案

对于双向数据绑定(bind),它与所有其他方式一样使用此语法 [(ngModel)]

将您的代码块替换为以下内容:

<div class="form-group">
    <label>Gender:</label> 
    &nbsp;

    <label class="radio-inline">
        <input type="radio" name="optradio" value='Male' [(ngModel)]="employee.gender" >Male
    </label>

    <label class="radio-inline">
        <input type="radio" name="optradio" value='Female' [(ngModel)]="employee.gender" >Female
    </label>

</div>

关于angular - 如何在 Angular 2中绑定(bind)双向单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45275792/

相关文章:

Angular 6 可观察和订阅

typescript - Angular 2 : switchMap not canceling previous http calls

javascript - 为什么 first() rxjs 运算符不断返回数组

angular - 格式化秒数为 mm :ss in Angular 2

angular - 将本地开发的模块打包/导入到项目中

angular - ionic 单一语言

javascript - Angular 2 将字符串转换为 md5 哈希

javascript - 如何使用 Observables 代替 Promise?

angular - 检查一个值是私有(private)的还是只读的

Angular 测试 - 模拟 InjectionToken