角度 8/反应式 - 将复选框事件的结果转换为字符串值

Question

我有我的反应式表单，字段 - 状态(可以有值"A"或"I"(：

this.form = this.formBuilder.group({
result_info: this.formBuilder.array([
this.getResultcontrols()]),
status: 'A',
change_seq: '',
action: 'C',
}); 

我想将字段状态映射到类型为"复选框"的输入 - (切换值为"A"或"I"(。 当我打印这个.form.value时，我希望看到状态的值反映为"A"或"I"，而不是真或假。有人可以帮助我使用相当于 HTML 的反应式表单吗......(不是基于模板驱动格式的 HTML 示例(

Answer 1

您可以像这样检索值：

<input type="checkbox" (change)="test($event)"  value="helloworld">

test(event) {
console.log(event.target.value)
return event.target.value
}

然后将属性状态的值分配给函数 test(( 的结果

Answer 2

一个FormControl存在，你有没有输入。我在另一个答案中写了(但我找不到它(。使用带有 [ngModel] 和 (ngModelChange( 的输入来控制 FormControl 的值

<input type="checkbox" [ngModel]="form.get('result_info2').value=='A'"
(ngModelChange)="form.get('result_info2').setValue($event?'A':'B')"
[ngModelOptions]="{standalone:true}">

如果您使用垫子复选框，请使用选中并更改

<mat-checkbox [checked]="form.get('result_info').value=='A'"
(change)="form.get('result_info').setValue($event.checked?'A':'B')">
</mat-checkbox>

在 FormArray 中，假设您有一个带有 formArray 的表单，您在 .ts 中定义了一个返回 formArray 的函数

。

get myformArray()
{
return this.form.get('formArray') as FormArray
}

和你的形式喜欢

<form [formGroup]="form">
<div formArrayName="formArray">
<div *ngFor="let group of myformArray.controls;let i=index" [formGroupName]="i">
<input type="checkbox"  [ngModel]="group.get('status').value=='A'"
(ngModelChange)="group.get('status').setValue($event?'A':'I')"
[ngModelOptions]="{standalone:true}">status
<input formControlName="action">
</div>
</div>
</form>

看到您使用输入"ngModel"来控制"检查"，并使用formControlName的输入来控制名称

你可以在堆栈闪电战中成为所有这些的例子