将复选框的值分配给 FormControlName (Angular)

Question

我有一个反应式表单，想获取复选框的值（不是 'true' 或 'false'）并将其分配给 formControlName (selectedSizeValueControl)。

我尝试了一些方法，但它们对我不起作用。

有人可以帮忙吗？

代码：


    <form [formGroup]="variantForm" (ngSubmit) = "submit()">
    
      <mat-checkbox value="{{selectedSizeValue}}" formControlName = "selectedSizeValueControl"  >{{selectedSizeValue}}</mat-checkbox>
     
      <mat-radio-button value="{{sale_preis.value}}"><input type="text" #sale_preis formControlName ="sale_preis"></mat-radio-button>
    
      <button >save</button>
    </form>

component.ts

selectedSizeValues: string;

variantForm = new FormGroup({
    selectedSizeValueControl: new FormControl(),
    sale_preis: new FormControl()  });

submit(){
    console.log(this.variantForm.value);

  }

selectedSizeValueControl 只接受 TRUE 或 FALSE，我希望它接受 selectedSizeValue 的值（例如：字符串）

谢谢大家！

Answer 1

mat-checkbox只能处理true或false，不会取字符串。将元素更改为 input 或将 selectedSizeValues 的类型更改为布尔值。

Answer 2

我成功了。

不要将 formControlName 与值一起使用
使用属性出价 [value]="selectedSizeValue" 而不是 value = {{selectedSizeValue}}
我从复选框中获取值并通过 component.ts 中的函数将其分配给 formControlName。就是这样。

<form [formGroup]="variantForm" (ngSubmit) = "submit()">
    
      <input type="checkbox" [value]="selectedSizeValue" (change)="GetStats($event)" >

      <mat-radio-button value="{{sale_preis.value}}"><input type="text" #sale_preis formControlName ="sale_preis"></mat-radio-button>
    
      <button >save</button>
</form>

component.ts

selectedSizeValues: string;

test: string ='';

variantForm = new FormGroup({
    selectedSizeValueControl: new FormControl(),
    sale_preis: new FormControl()  });

submit(){
       this.variantForm.value.selectedSizeValueControl = this.test;
  }
GetStats(event: Event) {
    console.log(event);
    // @ts-ignore
    this.test = event.target.value;
    console.log(this.test);
  }

将复选框的值分配给 FormControlName (Angular)

Assign the value of a checkbox to a FormControlName (Angular)

checkbox

angular

angular-reactive-forms

formgroups