angular2 复选框表单控件

Posted 2023-03-05

【中文标题】angular2 复选框表单控件

【英文标题】：angular2 checkbox formcontrol

【发布时间】：2017-02-22 12:13:22

【问题描述】：

对于一个带有绑定到 FormControl 的字符串值的简单复选框：

export class CheckboxComponent 
  formControl: FormControl;
  option: value: string;

  constructor() 
    this.formControl = new FormControl(); 
    this.option = value: "MyValue";

         this.formControl.valueChanges.subscribe(console.log);
  

<input type="checkbox" [formControl]="formControl" [value]="option.value" name="SomeName" />

订阅的输出是真假真假.... 我希望 angular 2 在 FormControl 中绑定字符串值“MyValue”。

默认角度 2，FormControl 和复选框似乎绑定布尔值，这很奇怪，因为默认浏览器提交行为是发送复选框的值，并且在多个具有相同名称的复选框的情况下，复选框值的数组绑定到复选框的名称。

提交将毫无用处：

Items=[true, false, true, true, true, false]

代替：

Items=[Toothbrush, Floss, Glock, Clean underwear]

所以本质上：如何让angular 2绑定字符串值而不是布尔值？

亲切的问候，

【问题讨论】：

有什么更新吗？我正在努力解决同样的问题。

【参考方案1】：

我相信我通过使用“覆盖”默认 CheckboxControlValueAccessor 的自定义指令解决了您（和我）的问题。 Angular2 核心设置 onChange 事件以触发该框是否被选中。下面的代码使用是否已检查和值触发一个对象。您只需将 html 元素设置为类型复选框的输入，并使用 [value]=valueToTrack

附加要跟踪的值

import Directive, ElementRef, Renderer, forwardRef from '@angular/core';

import ControlValueAccessor, NG_VALUE_ACCESSOR from '@angular/forms';


export const CHECKBOX_VALUE_OVERRIDE_ACCESSOR: any = 
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => CheckboxControlValueOverrideAccessor),
  multi: true,
;

@Directive(
  selector: 'input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]',
  host: '(change)': 'onChange(checked: $event.target.checked, value: $event.target.value)', '(blur)': 'onTouched()',
  providers: [CHECKBOX_VALUE_OVERRIDE_ACCESSOR]
)

export class CheckboxControlValueOverrideAccessor implements ControlValueAccessor 
  onChange = (_: any) => ;
  onTouched = () => ;

  constructor(private _renderer: Renderer, private _elementRef: ElementRef) 

  writeValue(value: any): void 
    this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', value.checked);
  
  registerOnChange(fn: (_: any) => ): void  this.onChange = fn; 
  registerOnTouched(fn: () => ): void  this.onTouched = fn; 

  setDisabledState(isDisabled: boolean): void 
    this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
  

【讨论】：

你如何配置这个覆盖？

@Joel 只需将其导入您的模块并将其添加到声明数组中。然后每当您使用复选框时，如果您将其定义为此行状态 'input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]' 则定义类型作为复选框并将 formControlName、formControl 或 ngModel 放在元素上。这将允许触发指令，并使用上面的代码。

我认为您在指令装饰器中缺少“选择器”关键字。