Angular2模型驱动窗体中的单选按钮按预期工作 [英] Radio buttons in Angular2 Model Driven forms not working as expected

问题描述

如果我在模型驱动的窗体中创建单选按钮，它们可以很好地工作，但它们没有选择由formControlName默认值反射的单选按钮。例如：

 < input type =radioformControlName =isPublicname =isPublicvalue =false id =keepPrivate>< label for =keepPrivate>保持私密< / label> 
< input type =radioformControlName =isPublicname =isPublicvalue =trueid =makePublic>< label for =makePublic> Make it Public< / label> ; 
 {{form.value.isPublic}} 
  

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

我试图通过向每个添加 [checked] 来驱动默认值。这适用于页面加载，因为在单选按钮中正确选择了默认值。它甚至适用于ONE选择 - 我可以选择另一个单选按钮，它将被选中，第一个将被取消选中，并且 {{form.value.isPublic}} 会从 false 更改为 true 。

 < input type =radioformControlName =isPublic[checked] =！form.value.isPublicname =isPublicvalue =falseid =keepPrivate>< label for =keepPrivate>保持私密< / label> 
< input type =radioformControlName =isPublic[checked] =form.value.isPublicname =isPublicvalue =trueid =makePublic>< label for = makePublic>将其设为公开< / label> 
 {{form.value.isPublic}} 
  

当我选择第一个单选按钮 - 在第一次单击时，单选按钮选择状态根本不会改变，但 {{form.value.isPublic}} 输出变回false。如果我再次点击它，那么单选按钮选择状态会改变。所以需要两次点击才能将其切换回默认值。如果在此之后再次单击另一个，它会按预期更改，但切换回第一个需要两次单击（一次单击更新表单值，第二次单击更改单选按钮的选择状态）。

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

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

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

 < input type =radioformControlName =isProfilePublicname =isProfilePublic[checked ] =！currentUser.isProfilePublicvalue =falseid =keepPrivate>< label for =keepPrivate>保持私密< / label> 
< input type =radioformControlName =isProfilePublicname =isProfilePublic[checked] =currentUser.isProfilePublicvalue =trueid =makePublic>< label for =makePublic >将其设为公开< / label> 
  

If I create radio buttons in my model driven form, they work fine but they don't have the radio button selected reflected by the formControlName default value. For example:

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

If I have this it works correctly, but I can see the value of form.value.isPublic is false (as output in the last line to confirm) and yet no radio button is selected by default.

I tried to correct this by adding [checked] to each to drive the default value. This works for the page load, in that defaults are properly selected in the radio buttons. It even works for ONE selection - in that I can select the other radio button, it will be selected, the first one will be unselected, and the {{form.value.isPublic}} will change from false to 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}}

The problem comes when I select the first radio button again - on the first click the radio button selection state doesn't change at all, but the {{form.value.isPublic}} output changes back to false. If I click it again, then the radio button selection state changes. So it takes two clicks to switch it back to the default. If I click the other one again after that, it changes as expected but switching back to the first one takes two clicks (one click updates the form value and the second click changes the selection state of the radio button).

What should I be doing in this situation to have the radio buttons function correctly and reflect the default value for the form?

解决方案

After experimenting with using values from the form object to drive other Angular2 directives (like *ngIf) I discovered that the behaviour is always a little strange. For example, if I draw parts of the page using *ngIf based on the value of form.value.isProfilePublic, the *ngIf section would only change once even though I can see the value of that variable is changing. It isn't important to the answer so I won't elaborate but bottom line is that using form values to dynamically drive things that can update the form value itself doesn't work as I'd expect (likely for a good reason).

...so now I'm using a different variable not related to the form to drive the default selection and it works fine. So, the following works:

<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>

这篇关于Angular2模型驱动窗体中的单选按钮按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！