angular2 case formcontrol

Pour une simple case à cocher avec une chaîne de valeur liée à un 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" />

La sortie de la abonnez-vous est true, false, true, false....
Je veux l'angle de 2 à lier la valeur de chaîne "Mavaleur" dans le FormControl.

Par défaut angulaire 2, FormControl et cases à cocher semblent lier les valeurs booléennes qui est étrange, car le navigateur par défaut de soumettre le comportement est pour envoyer la valeur de la case et, dans le cas de plusieurs cases avec le même nom, un tableau de la case à cocher valeurs liées à la nom des cases à cocher.

Serait assez inutile de soumettre:

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

Au lieu de:

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

Donc, en substance: Comment faire angulaire 2 lier la chaîne de valeur, la valeur booléenne?

Salutations,

  • Toute mise à jour? Je suis aux prises avec le même problème.
InformationsquelleAutor Innovating Concepts | 2016-10-13
  1. 2

    Je crois que j'ai résolu votre (et mon) problème en utilisant une coutume directive qui "remplace" le défaut CheckboxControlValueAccessor. Angular2 des ensembles de base de l'événement onChange de feu si la case est cochée ou non. Le code ci-dessous feux d'un objet avec la question de savoir si elle est cochée, et la valeur. Vous aurez juste besoin de définir l'élément html comme un input de type checkbox, et attaché à la valeur que vous souhaitez suivre avec [valeur]={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);
  }
}
    • Comment configurez-vous cette substitution?
    • Il suffit d'importer dans votre module et l'ajouter aux déclarations de tableau. Alors à chaque fois que vous utilisez une case à cocher, si vous définir en tant que cet état de la ligne 'input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]"afin de définir le type de case et de mettre un formControlName, formControl, ou ngModel sur l'élément. Cela permettra d'incendie de la directive, et de travailler avec le code ci-dessus.
    • Je pense que vous êtes en manque un " sélecteur de mot-clé dans votre directive décorateur.
    • Vous avez raison, la mise à jour.
    InformationsquelleAutor Austin Shoecraft