typescript 如何获得Angular 的多个复选框值?

70gysomp  于 2023-02-25  发布在  TypeScript
关注(0)|答案(1)|浏览(185)

我怎样才能得到多个复选框的值,并将选中的值存储在一个Angular 数组中?
下面是我HTML代码

<form >
<div class="form-check" >
  <input class="form-check-input" type="checkbox" value="admin"/>
  <label class="form-check-label" >Admin</label>
</div>
  <div class="form-check">
    <input class="form-check-input"  type="checkbox"value="user">
    <label class="form-check-label" >User</label>
  </div>
  <button class="btn btn-outline-info" type="submit"> assign role</button>

</form>
goqiplq2

goqiplq21#

如果我全都明白了,你就可以这样做:

    • 超文本标记语言**
<form [formGroup]="form" (ngSubmit)="submit()">
  <input type="checkbox" class="form-control" formControlName="userCheck1" />
  <input type="checkbox" class="form-control" formControlName="userCheck2" />
  <input type="checkbox" class="form-control" formControlName="userCheck3" />
  <button>Submit</button>
</form>
<button (click)="reset()">Reset</button>
    • 代码**
export class AppComponent {
  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({
      userCheck1: new FormControl({ value: true }),
      userCheck2: new FormControl({ value: true }),
      userCheck3: new FormControl({ value: true }),
    });
  }
  submit() {
    console.log(this.form.value);
  }
  reset() {
    this.form.reset();
  }
}

如果单击submit,则会得到一个包含所有三个选项(falsetrue)的数组。
Here是堆栈 lightning 战。

相关问题