reactivos - ¿Angular cómo obtener el valor de casilla de verificación múltiple?
tablas angular 4 (5)
Estoy usando la casilla de verificación en angular para seleccionar más de un dato y estoy tratando de obtener el valor de la casilla de verificación en el formulario de envío. En lugar de obtener el valor, obtengo el valor como verdadero. He intentado el siguiente código.
export class CreatesessionComponent implements OnInit {
form : FormGroup ;
constructor(private formBuilder: FormBuilder) {
}
ngOnInit() {
this.form = this.formBuilder.group({
useremail : new FormArray([
new FormControl('''',Validators.required)
])
});
}
}
userdata es una matriz dinámica que obtendré de la base de datos
<div class = "row" formArrayName="useremail; let k = index">
<div class="col-md-8 col-sm-5 col-xs-12 col-lg-8">
<div *ngFor="let data of userdata">
<div class="col-md-6">
<input type="checkbox" name="useremail" formControlName ="{{k}}" [value]="data.email">{{data.email}}
</div>
</div>
</div>
</div>
Como tiene varios valores que desea usar, debe usar un
FormArray
, ya que
FormControl
solo puede capturar un valor.
Comience declarando un formulario vacío.
this.myForm = this.fb.group({
useremail: this.fb.array([])
});
Itere sus correos electrónicos y observe el evento de cambio y pase el correo electrónico y el evento respectivos a un método en
onChange
donde verifica si está
checked
, luego agregue el correo electrónico respectivo al formulariorayray, si no está marcado, elimine el correo electrónico elegido de la matriz de formularios :
<div *ngFor="let data of emails">
<input type="checkbox" (change)="onChange(data.email, $event.target.checked)"> {{data.email}}<br>
</div>
Y en
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);
}
}
Demo
El problema con la respuesta @ 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, necesita 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. He escrito una publicación de blog con una explicación detallada, así como plunker creado un plunker que muestra 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 grupal:
@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.
Hice esta función en la entrada para la selección automática del formulario de carga:
[marcado] = "this.selected? this.selected.type.includes (type): false"
Código completo:
<label *ngFor="let type of this.entityType" class="checkbox-inline c-checkbox">
<input type="checkbox" [checked]="this.selected? this.selected.type.includes(type) : false" (change)="onChangeEntityType(type, $event.target.checked)"/>
<span class="fa fa-check"></span>{{type | translate}}</label>
Dónde
this.selected
es mi objeto y
this.selected.type.includes (type)
comprobar automáticamente si se marcarán las casillas de verificación.
Lo he resuelto de dos maneras diferentes: una con una matriz de casillas de verificación simple: mat-checkbox y la otra con mat-selection-list.
La esencia del código en la publicación. En el valor puede establecer todo tipo de combinaciones. En mi caso, he usado la concatenación de id y descripción para iniciar los controles de formulario al final de una fuente.
Mi problema fue limpiar la matriz de casillas de verificación en un ejemplo más simple ... No hay tiempo que perder ... Ejecutando las siguientes tareas ... :)
Puede obtener una matriz de datos comprobados:
<input .... (change)="onChange(data)" />
onChange(data){
data.checked = !data.checked;
}
para obtener todo el valor verificado
let checkedValues = userdata.filter(x => x.checked).map(x => x.email);