【问题标题】:Facing issues with NgModel and [checked] for a radio input面临 NgModel 的问题和无线电输入的 [检查]
【发布时间】:2021-08-11 18:30:09
【问题描述】:

所以我正在提交一个角度表单,并且我提供了一个向用户更新数据的选项,但是当输入字段与绑定时,我无法根据条件预先检查单选按钮ngModel ,我是 Angular 的绝对初学者,所以任何帮助都将不胜感激

app.component.html

<form #office="ngForm">
<div class="form-group pointer">
              <label for="Shift" class="font-weight-bold fs-6">Tansport <span class="text-danger">*</span></label><br>
              <div class="form-check form-check-inline">
                  <input class="form-check-input pointer" [checked]="editableData.transport.indexOf('cab') > -1" type="radio" ngModel  name="transport" id="transport-1" value="cab">
                  <label class="form-check-label" for="transport-1">Cab</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input pointer" [checked]="editableData.transport.indexOf('own') > -1" type="radio" ngModel name="transport" id="transport-2" value="own">
                  <label class="form-check-label" for="transport-2" >Own</label>
                </div>
          </div>
</form>

需要根据条件选中其中一个复选框

【问题讨论】:

  • 您在控制台中看到任何错误吗?可以提供stackblitz吗?
  • 没有控制台错误,请检查这个 stackblitz stackblitz.com/edit/…,问题是复选框没有根据检查的条件被检查,如果我删除 ngModel 它可以工作

标签: angular angular-forms


【解决方案1】:

我已经在这里修复了:- https://stackblitz.com/edit/angular-ivy-vb5eeh?file=src%2Fapp%2Fapp.component.html

将它与类中的对象绑定。

【讨论】:

    【解决方案2】:

    我更新了你的 stackblitz https://stackblitz.com/edit/angular-ivy-kylv5c

    为什么你在 radioButton 上需要这个 ngModel 呢?如果你想访问它们的值,你也可以使用表单值。

    【讨论】:

    猜你喜欢
    • 2021-09-23
    • 2013-08-16
    • 1970-01-01
    • 1970-01-01
    • 2017-04-01
    • 2014-09-01
    • 2018-01-04
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多