Vinculação de dados bidirecional da caixa de seleção em Angular

Este artigo angular examinará diferentes métodos para realizar uma vinculação de dados bidirecional com caixa de seleção.

Usaremos o atributo ngModelOptions para vinculação de dados bidirecional. Esta solução funciona melhor quando há um atributo name.

Também apresentaremos o atributo ngModel que permite ao checkboxFlag armazenar o estado real da caixa de seleção quando é alterado. Em seguida, usaremos o atributo change para vinculação de dados, de forma que, quando o valor no componente for alterado, a caixa de seleção também receberá um novo valor.

Quando ngModel é usado em formulários, geralmente não funciona, então o atributo ngModelOptions é melhor usado para garantir que o valor da caixa de seleção mude conforme os dados no componente são alterados.

<input
	type="checkbox"
	[(ngModel)]="itemChange"
	[ngModelOptions]="{standalone: true}"/>

Em alguns casos, o código não funcionará se a entrada não estiver dentro de um formulário, mas fizer parte do loop ngFor. Além disso, o atributo name precisa ser incluído na configuração do código para que o código funcione bem.

Enquanto o código de exemplo acima lida com vinculação de dados bidirecional na parte do front-end, esta solução realiza mudanças no back-end, fazendo uso adequado de ngModel.

<input
	[(ngModel)]="itemOne">
	type="checkbox"/>

Para fazer com que este código funcione perfeitamente, importe { FormsModule } de @angular/forms para app.module.ts e adicione à matriz de importações parecida com esta:

import { FormsModule } from'@angular/forms';

[...]

@NgModule({
imports: [
	[...]
	FormsModule
],
[...]
})

O atributo name deve ser exclusivo para que o estado padrão verificado funcione conforme o esperado e deve estar dentro da tag input. Mas este código não funcionará se você usar a caixa de seleção dentro de um ngFor enquanto repete uma matriz de objetos, assim:

[{"checked":true},{"checked":false}]

Então, também podemos usar o atributo change para fazer a vinculação de dados nas caixas de seleção. Com essa abordagem, criamos os códigos de forma mais detalhada.

O componente html terá a seguinte aparência:

<input #saveCheckboxOne
	id="saveCheckboxOne"
	type="checkbox"
	[checked]="saveCheckbox"
	(change)="onSaveCheckboxChange(saveUserNameCheckBox.checked)" />

Em seguida, o component.js será escrito como abaixo.

public saveCheckbox:boolean;

public onSaveCheckboxChange(value:boolean){
this.saveUsername = value;
}