将复选框的值更改为字符串答案

【问题标题】：Change the value of checkbox to string将复选框的值更改为字符串
【发布时间】：2020-12-03 14:33:09
【问题描述】：

我已经看到了很多问题，但我仍然无法将复选框的值更改为字符串。我需要根据 true - false -> 'A' - 'B' 更改值。我在角度使用反应形式。我得到了这个：

...
..*ngFor="let item of myForm.get('people')['controls'];
...
<mat-checkbox formControlName="check"
              [checked]="item.get('check').value === 'A' ? true : false"
              (change)="item.get('check').setValue($event.checked ? 'A' : 'B')">
</mat-checkbox>

如果出现的值是“A”，则必须检查 true，如果是“B”，则必须检查 false，我真的不明白为什么不设置更改时的值。我需要将复选框的值作为字符串发送

【问题讨论】：

删除formControlName。您有一个更改 formControl 的“mat-checkbox”。 stackoverflow.com/questions/59910767/…
@Eliseo 我在该问题中看到了您的评论，但我无法使其工作，但是今天我可以通过删除 formControlName 来使其工作。现在，如果我删除 formControl，我将失去对该控件的引用，并通过一个按钮启用此表单的版本（它在表格中）。 (this.myForm.controls.people as FormArray).at(index).enable();（其中 index 是表的行）。这正在激活我拥有的其他控件。在我的组件中，我在“禁用：true”中但不影响此控件。 Pls check this img for reference。复选框已启用
你总是可以写[disabled]="myForm.get('people."+index).enable"。记住 mat-checkbox 的所有属性都称为“formControl”。唯一的“但是”是要让人感动，为此你可以使用(change)event

标签： html angular typescript angular-material

【解决方案1】：

<form [formGroup]="form" (ngSubmit)="submit()">
  {{form.value | json}} // just for to see the output
  <ng-container formArrayName="people" *ngFor="let item of people.controls; let i = index">
    <div [formGroupName]="i">
      <mat-checkbox formControlName="check" [checked]="item.get('check').value === 'A' ? true : false"
        (change)="setCheck($event.checked, i)">
      </mat-checkbox>
    </div>
  </ng-container>
  <button mat-button>submit</button>
</form>

import { FormArray } from '@angular/forms';
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: "app-test",
  templateUrl: "./test.component.html",
  styleUrls: ["./test.component.scss"],
})
export class TestComponent implements OnInit {

  form: FormGroup
 
  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.createForm();
  }


  createForm(){
    this.form = this.formBuilder.group({
      people: this.formBuilder.array([
        this.createItem()
      ])
    })
  }

  createItem(){
    return this.formBuilder.group({
      check: ''
    })
  }


  addItem(){
    this.people.push(this.createItem());
  }


  get people(){
    return this.form.get("people") as FormArray;
   }

   setCheck(checked, index){
     this.people.controls[index].get("check").setValue(checked ? 'A' : 'B');
  }

  submit(){
    console.log(this.form.value);  
  }
}

还有一件事，尝试在组件类中使用表示逻辑。 风格指南：风格 05-17。链接：https://angular.io/guide/styleguide#put-presentation-logic-in-the-component-class

【讨论】：

我很欣赏指南链接，我会看看它。我是 Angular 的新手。在我的情况下，我需要从 formArray 中获取 controlName，现在我得到了这个：this.myForm= fB.group({people: this.fB.array([..])}); 它看起来像 this.myForm.get('people.check').setValue(..) 对吗？
你能给我看一下表格本身吗？对于正确的方法，我们需要看看你是如何构建你的响应式表单的。
@Heybat，您需要删除formControlName。我们正在改变一个 FormControl 的值，但是这个 FormControl 不能“成为”在屏幕上。请记住，一个 FormControl 是由 seft 存在的，它不需要在 .html 中输入任何内容

【解决方案2】：

首先，如果您在循环中创建许多复选框，并将 formControlName 设置为特定的，则每个复选框将绑定到 1 个控件。（您只需单击一次即可选中和取消选中所有这些。）

第二个，你应该在formGroup中使用formControlName：

<div [formGroup]="myForm">
...
..*ngFor="let item of myForm.get('people')['controls'];"
...
<mat-checkbox formControlName="check"
              [checked]="item.get('check').value === 'A' ? true : false"
              (change)="item.get('check').setValue($event.checked ? 'A' : 'B')">
</mat-checkbox>
</div>

第三，我建议在 ngFor 和 '' 中使用方括号来查找控件名称作为字符串。

[formControlName]="'check'"

最后，我建议使用 mat-checkbox 的 (change) 事件，并调用自定义函数，然后在 ts 端做任何你想做的事情：

<mat-checkbox [formControlName]="'check'" (change)="someFunction(item, $event)"></mat-checkbox>

在ts中：

someFunction(item, event){
  ...//Do your black magic here
}

顺便说一句：如果你使用响应式表单，并将控件绑定到复选框，它的值总是布尔值，因为它的逻辑......你应该决定稍后将值映射到“A”或“B” ，但您不应该使用相同的时间。并且向后：复选框将始终与 true 或 false，宽度 FormControl 一起使用。想一想：你想要一个 Control 来控制真值或假值，但你在其中强制“A”或“B”......这是不合逻辑的。请重新考虑您的解决方案。

【讨论】：