Question

我正在设置一组具有不同级别值的复选框。可以选择多个级别，然后使用提交按钮提交。然后，“提交”按钮应将这些值作为参数传递给Typescript类中的函数。

我想将值作为参数传递。例如，如果仅选择第一级和第二级，则方法和参数将如下所示：

levelSave（value1，value2）

谢谢！

HTML

<div class="form-group">
   <li><input type="checkbox" id="level1" value="1" required><label for="level1"></label> Level 1 </li>
   <li><input type="checkbox" id="level2" value="2" required><label for="level2"></label> Level 2 </li>
   <li><input type="checkbox" id="level3" value="3" required><label for="level3"></label> Level 3 </li>
 </div>
    </ul>

<button type="button" class="green-btn pop-up-btn" (click)="levelSave()" id="LevelPopupSubmit">Submit</button>

TypeScript

levels = [];


//value3 if level 3 was selected

levelSave(value1,value2){
  levels.push(value1);
  levels.push(value2);
}

Answer 1

您需要在此处使用Model变量。使用“名称”，“已检查”属性定义对象数组。像

checkboxes = [{'name':'checkbox1',checked:false},{'name':'checkbox2',checked:false}];

并将其绑定到表单，这样，当您想要获得选中的复选框时，只需将这些模型变量传递给函数即可

Answer 2

我不确定您使用的是反应式表单。您已经添加了角度标签。因此，我给出了一个基于角度的解决方案。

如果您不使用反应形式，则可能会看到文章https://angular.io/guide/reactive-forms
如果您使用反应式表单，则Checkbox是一个表单控件。因此，您可以简单地修补值。或者，您可以默认检查值。

这是模板

<input type="text" formControlName="checkedItem">

// Patch value
this.profileForm.patchValue({
    checkedItem: [false]
  });

如何将复选框的值传递给打字稿中的函数？

2 个答案: