0
1.2K
Views¿Angular cómo obtener los múltiples valores de casilla de verificación?
Estoy usando una casilla de verificación en Angular para seleccionar más de un elemento y estoy tratando de obtener el valor de esa casilla de verificación para enviar.
En cambio, obtengo el valor de esos valores como una matriz de true -s. Eso es lo que he intentado:
export class CreateSessionComponent implements OnInit { form : FormGroup ; constructor(private formBuilder: FormBuilder) {} ngOnInit() { this.form = this.formBuilder.group({ userdata : new FormArray([ new FormControl('', Validators.required) ]) }) } } userdata es una matriz dinámica poblada de una base de datos.
<div formArrayName="useremail; let k = index"> <div *ngFor="let data of userdata"> <div> <input type="checkbox" name="useremail" formControlName ="{{k}}" [value]="data.email">{{data.email}} </div> </div> </div>3 answers
Answer question0
Dado que tiene varios valores que desea usar, debe usar un FormArray , ya que FormControl solo puede capturar un valor.
Comience declarando un formArray vacío:
this.myForm = this.fb.group({ useremail: this.fb.array([]) }); Repita sus correos electrónicos y observe el evento de cambio y pase el correo electrónico y el evento respectivos a un método onChange donde verifique si está checked , luego agregue el correo electrónico respectivo al formulario, si no está marcado, elimine el correo electrónico elegido de la matriz de formulario :
<div *ngFor="let data of emails"> <input type="checkbox" (change)="onChange(data.email, $event.target.checked)"> {{data.email}}<br> </div> Y onChange :
onChange(email:string, isChecked: boolean) { const emailFormArray = <FormArray>this.myForm.controls.useremail; if(isChecked) { emailFormArray.push(new FormControl(email)); } else { let index = emailFormArray.controls.findIndex(x => x.value == email) emailFormArray.removeAt(index); } }Manifestación
0
El problema con la respuesta de @AJT_82 es que si desea modificar el modelo usando form.reset() o form.patchValue() , no funcionará. Para resolver estos problemas, debe implementar la interfaz ControlValueAccessor . Básicamente, debe crear 2 componentes: el componente de grupo que contiene el valor del modelo e implementa ControlValueAccessor y el componente de casilla de verificación, la casilla de verificación real. Escribí una publicación de blog con una explicación detallada y creé un plunker que demuestra algunos ejemplos.
uso final:
<checkbox-group [(ngModel)]="selectedItems"> <checkbox value="item1">Item 1</checkbox> <checkbox value="item2">Item 2</checkbox> <checkbox value="item3">Item 3</checkbox> <checkbox value="item4">Item 4</checkbox> </checkbox-group>Implementación del componente de grupo:
@Component({ selector: 'checkbox-group', template: `<ng-content></ng-content>`, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxGroupComponent), multi: true }] }) export class CheckboxGroupComponent implements ControlValueAccessor { private _model: any; // here goes implementation of ControlValueAccessor ... addOrRemove(value: any) { if (this.contains(value)) { this.remove(value); } else { this.add(value); } } contains(value: any): boolean { if (this._model instanceof Array) { return this._model.indexOf(value) > -1; } else if (!!this._model) { return this._model === value; } return false; } // implementation for add and remove ... }Componente de casilla de verificación:
@Component({ selector: 'checkbox', template: ` <div (click)="toggleCheck()"> <input type="checkbox" [checked]="isChecked()" /> <ng-content></ng-content> </div>` }) export class CheckboxComponent { @Input() value: any; constructor(@Host() private checkboxGroup: CheckboxGroupComponent) { } toggleCheck() { this.checkboxGroup.addOrRemove(this.value); } isChecked() { return this.checkboxGroup.contains(this.value); } }Los controles de casilla de verificación secundarios tienen referencia al componente de grupo (decorador @Host() ). Cuando se hace clic en una casilla de verificación, toggleCheck() llama al método addOrRemove() en el componente del grupo y si el valor de la casilla de verificación ya está en el modelo, se elimina; de lo contrario, se agrega al modelo.
