如何在Angular 2.1.0中将checkbox的值绑定到formControl?

时间:2016-12-27 11:31:26

标签: angular angular2-forms

当我将formControl绑定到类型为checkbox的input元素时,它给出了checkbox的状态而不是其值。有没有办法将formControl绑定到值。

这是一个带输出的示例代码。

模板文件

<div>
    <form [formGroup]="myForm">
        <div>
            <label>Option1</label>
            <input type="checkbox"
                   [formControl]="myForm.controls['option1']"
                   value="value1">
        </div>
        <div>
            <label>Option2</label>
            <input type="checkbox"
                   [formControl]="myForm.controls['option2']"
                   value="value2">
        </div>
        <div>
            <label>Option3</label>
            <input type="checkbox"
                   [formControl]="myForm.controls['option3']"
                   value="value3">
        </div>
        <div>
            <label>Option4</label>
            <input type="checkbox"
                   [formControl]="myForm.controls['option4']"
                   value="value4">
        </div>
    </form>
    <!-- debug the value of form -->
    <pre>
        {{myForm.value | json}}
    </pre>
</div>

输出

output of the sample form

当我打印myForm的值时,我会获得复选框的状态。

是否可以将formControl绑定到checkbox的value属性,以便我可以获得FormGroup的内部值对象,如下所示?

{
   option1:null,
   option2:value2,
   option3:null,
   option4:value4,
}

0 个答案:

没有答案