Question

我正在创建我的第一个2+角形窗体，并希望像单击收音机一样单击“是”和“否”按钮来设置值。我有一个使用隐藏输入框的解决方案，该输入框可通过单击其中任何一个按钮来设置。

我只想知道这是否是在angular 2+中是正确且优雅的解决方案？有没有不用隐藏输入的方法吗？

我的代码：

 <div class="form-group" [ngClass]="{'error': newProductForm.controls.difficulty?.invalid && newProductForm.controls.difficulty?.dirty }">
  <label for="productDifficulty">Difficulty</label>
  <em *ngIf="newProductForm.controls.difficulty?.invalid">Required</em>

  <div class="btn-radio" #difficuty>
    <input [(ngModel)]="difficulty" name="difficulty" required id="productDifficulty" type="hidden" class="form-control" />
    <button type="button" [class.active]="difficulty===true" (click)="difficulty=true" class="btn">Yes</button>
    <button type="button" [class.active]="difficulty===false" (click)="difficulty=false" class="btn">No</button>
  </div>
</div>

Answer 1

从我的角度来看，这没有错。但是不优雅。

如果要保留此复选框，则可以对其进行自定义，例如拨动开关

enter link description here

否则，如果您只想输入进行验证，则输入不是真正必要的

Answer 2

戴维，如果代码属于FormGroup（我称之为“ newProductForm”），则可以使用setter（并忽略隐藏的字段）

get difficulty()
{
    return this.newProductForm?this.newProductForm.controls.difficulty:false
}
set difficulty(value)
{
   this.newProductForm.controls.dificulty.setValue(value)
}

或者您可以制作动画以制作自定义表单控件

如何根据按钮组的点击设置值？

2 个答案: