Question

如果我在模型驱动表单中创建单选按钮，它们可以正常工作，但它们没有选择由formControlName默认值反映的单选按钮。例如：

<input type="radio" formControlName="isPublic" name="isPublic" value="false" id="keepPrivate" ><label for="keepPrivate">Keep it Private</label>
<input type="radio" formControlName="isPublic" name="isPublic" value="true" id="makePublic" ><label for="makePublic">Make it Public</label>
{{form.value.isPublic}}

如果我有这个功能，它可以正常工作，但我可以看到form.value.isPublic的值为false（在最后一行输出以确认），但默认情况下没有选择单选按钮。

我尝试通过向每个[checked]添加{{form.value.isPublic}}来驱动默认值来解决此问题。这适用于页面加载，因为在单选按钮中正确选择了默认值。它甚至适用于一个选择 - 我可以选择其他单选按钮，它将被选中，第一个将被取消选择，false将从true更改为<input type="radio" formControlName="isPublic" [checked]="!form.value.isPublic" name="isPublic" value="false" id="keepPrivate" ><label for="keepPrivate">Keep it Private</label> <input type="radio" formControlName="isPublic" [checked]="form.value.isPublic" name="isPublic" value="true" id="makePublic" ><label for="makePublic">Make it Public</label> {{form.value.isPublic}} 。

{{form.value.isPublic}}

当我再次选择第一个单选按钮时出现问题 - 在第一次单击时，单选按钮选择状态根本不会改变，但3.2.5.v20150427输出变回false。如果我再次单击它，则单选按钮选择状态会更改。因此，只需两次单击即可将其切换回默认值。如果我在此之后再次单击另一个，它会按预期更改，但切换回第一个需要两次单击（一次单击更新表单值，第二次单击更改单选按钮的选择状态）。

在这种情况下我应该做些什么才能使单选按钮正常工作并反映表单的默认值？

Answer 1

在尝试使用表单对象中的值来驱动其他Angular2指令（如*ngIf）后，我发现行为总是有点奇怪。例如，如果我根据*ngIf的值使用form.value.isProfilePublic绘制部分页面，*ngIf部分只会更改一次，即使我可以看到该变量的值正在发生变化。这对答案来说并不重要，所以我不会详细说明，但最重要的是，使用表单值动态驱动可以更新表单值的内容本身并不像我期望的那样工作（可能是有充分理由的。）

...所以现在我使用与表单无关的不同变量来驱动默认选择，它运行正常。因此，以下工作：

<input type="radio" formControlName="isProfilePublic" name="isProfilePublic" [checked]="!currentUser.isProfilePublic" value="false" id="keepPrivate" ><label for="keepPrivate">Keep it Private</label>
<input type="radio" formControlName="isProfilePublic" name="isProfilePublic" [checked]="currentUser.isProfilePublic" value="true" id="makePublic" ><label for="makePublic">Make it Public</label>

Answer 2

我无法解释需要两次点击，但这应该有效：

<label>
    <input type="radio" formControlName="isPublic" value="true" id="isPublic" (change)="form.value.isPublic = true"/> Make it public
</label>
<label>
    <input type="radio" formControlName="isPublic" value="false" id="isPublic" (change)="form.value.isPublic = false"/> Keep it private
</label>

在我的项目中，我们根据Angular 2 Dynamic Forms

的文档中的“问题”示例动态生成单选按钮

<label class="radio-inline" *ngFor="let opt of input.options">
    <input type="radio" [formControlName]="input.key" [value]="opt.value" [id]="input.key" (change)="input.value = opt.value">
    {{opt.label}}
</label>

Angular2模型驱动表单中的单选按钮无法按预期工作

2 个答案: