Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado.
Com ligação bidirecional, seus componentes podem compartilhar dados, lidar com eventos e atualizar valores em tempo real.
A ligação bidirecional permite que os usuários insiram dados do arquivo HTML e os enviem para o arquivo TypeScript e vice-versa. Isso é útil para validação de entrada, manipulação e muito mais.
Depois de passar os dados do HTML para o arquivo TypeScript, você pode usar os dados para concluir determinada lógica de negócios. Um cenário de exemplo seria se você quisesse verificar se o nome inserido em um campo de entrada já existia.
Como você pode usar a encadernação bidirecional?
A ligação bidirecional em aplicativos Angular geralmente é definida no .html arquivo, usando o ngModel diretiva. A ligação bidirecional em um formulário de entrada pode se parecer com isto:
<entrada
tipo="e-mail"
id="e-mail"
nome="e-mail"
espaço reservado ="[email protected]"
[(ngModel)]="endereço de email"
/>No .ts arquivo, o endereço de email variável está vinculada ao emailAddress do formulário.
endereço de e-mail: String = ''; Como configurar um formulário de exemplo em um aplicativo Angular
Ao criar um aplicativo básico, você pode usar a associação bidirecional para verificar se já existe um nome de usuário em potencial.
- Criar uma novo aplicativo Angular.
- Execute o ng gerar componente comando para criar um novo componente. É aqui que você armazenará o formulário.
ng gerar componente nome de usuário-verificador-formulário - Substitua todo o código em seu app.component.html arquivo com as seguintes tags:
<app-username-checker-form></app-username-checker-form> - Adicione o seguinte CSS ao seu novo componente .css arquivo, localizado em nome de usuário-verificador-form.component.css, para estilizar o formulário:
.recipiente {
exibição: flexível;
alinhamento de texto: centro;
justificar-conteúdo: centro;
itens de alinhamento: centro;
altura: 100vh;
}.cartão {
largura: 50%;
cor de fundo: peachpuff;
raio da borda: 1rem;
preenchimento: 1rem;
}entrada {
fronteira: 3px sólido #1a659e;
raio da borda: 5px;
altura: 50px;
altura da linha: normal;
cor: #1a659e;
exibição: bloco;
largura: 100%;
box-sizing: border-box;
do utilizador-selecionar: auto;
tamanho da fonte: 16px;
preenchimento: 0 6px;
padding-left: 12px;
}entrada:foco {
fronteira: 3px sólido #004e89;
}.btn {
exibição: bloco;
contorno: 0;
cursor: ponteiro;
fronteira: 2px sólido #1a659e;
raio da borda: 3px;
cor: #fff;
fundo: #1a659e;
tamanho da fonte: 20px;
peso da fonte: 600;
altura da linha: 28px;
preenchimento: 12px 20px;
largura: 100%;
margem superior: 1rem;
}.btn:flutuar {
fundo: #004e89;
fronteira: #004e89;
}.sucesso {
cor: #14ae83;
}.erro {
cor: #fd536d;
} - Adicione o seguinte CSS em src/styles.css para definir a família de fontes, plano de fundo e cores de texto do aplicativo geral:
@import url("https://fonts.googleapis.com/css2?family=Poppins: peso@300;400&exibir=trocar");corpo {
família de fontes: "Poppins";
cor de fundo: papaywhip;
cor: #1a659e;
} - Substitua o código em nome de usuário-verificador-form.component.html, para adicionar o formulário do verificador de nome de usuário:
<classe div ="recipiente">
<classe div ="cartão">
<h1> Verificador de nome de usuário </h1><forma>
<entrada
tipo="texto"
id="nome de usuário"
nome="nome de usuário"
espaço reservado ="Por favor coloque um nome de usuário"
/>
<classe de botão ="btn"> Salvar </button>
</form></div>
</div> - Execute seu aplicativo usando o comando ng serve no terminal.
ng servir - Veja a sua candidatura em http://localhost: 4200/.
Enviando dados entre os arquivos HTML e TypeScript
Use a ligação bidirecional para enviar dados para o seu .ts arquivo e voltar para o .html arquivo. Isso é possível com o uso de ngModel no formulário entrada Tag.
- Importar o Módulo Forms no app.module.ts arquivo e adicione-o ao importa variedade:
importar { Módulo Forms } de '@angular/formas';@NgModule({
//...
importações: [
// outras importações
Módulo Forms
],
//...
}) - Declare um nome de usuário variável de classe no .ts arquivo, nome de usuário-verificador-form.component.ts:
nome de usuário: string = ''; - Em nome de usuário-verificador-form.component.html, adicionar [(ngModel)] com o nome de usuário variável na tag de entrada. Isso permite a ligação bidirecional, e qualquer coisa digitada na entrada de nome de usuário do formulário é atribuída à variável de nome de usuário no .ts arquivo.
<entrada
tipo="texto"
id="nome de usuário"
nome="nome de usuário"
espaço reservado ="Por favor coloque um nome de usuário"
[(ngModel)]="nome de usuário"
/> - Para testar se os dados estão sendo enviados para o .ts arquivo, crie um salvar() método em nome de usuário-verificador-form.component.ts. Quando você enviar o formulário, o aplicativo chamará essa função.
salvar(): vazio {
console.registro(esse.nome de usuário);
} - Adicione o ngSubmit diretiva para o
- Ao clicar no botão Salvar, o salvar() A função imprimirá o valor inserido no campo de entrada para o console. Você pode visualizar o console em tempo de execução usando as ferramentas de desenvolvedor do navegador. Se você não estiver familiarizado com o navegador DevTools ou visualizar o console, poderá aprender mais sobre como usar o Chrome DevTools.
- Envie o nome de usuário de volta para o .html arquivo. Adicione a variável de nome de usuário entre chaves ao nome de usuário-verificador-form.component.html arquivo, após o
- Em nome de usuário-verificador-form.component.ts, adicione algumas variáveis de classe para verificar se o nome de usuário já existe. Declare um nomes de usuários array com alguns nomes de usuário usados e adicione um mensagem string que informa o usuário sobre a verificação. a variável isValidUsername é verdadeiro se o nome de usuário digitado não estiver na matriz de nomes de usuário.
nomes de usuário: string[] = [ 'bart', 'lisa', 'fritar', 'leela' ];
mensagem: string = '';
isValidUsername: boleano = falso; - O salvar() O método deve verificar se o nome de usuário inserido já está na matriz de nomes de usuário existente ou não. Dependendo do resultado, a mensagem será definida de acordo.
salvar(): vazio {
if (este.nome de usuário != '') {
esse.isValidUsername = !esse.usernames.includes(
esse.nome de usuário.toLowerCase()
);se (esse.isValidUsername) {
esse.mensagem = `Seu novo nome de usuário é '${esse.nome de usuário}'`;
} outro {
esse.mensagem = `O nome de usuário'${esse.nome de usuário}'já foi levado';
}
}
} - Complete a nome de usuário-verificador-form.component.html arquivo mostrando se o nome de usuário digitado existe ou não. Adicione uma mensagem de erro abaixo do
tags após o formulário. O isValidUsername A variável é útil aqui para determinar a cor da mensagem exibida.
<p *ngSe="nome de usuário" [ngClass]="isValidUsername? 'sucesso': 'erro'">
{{ mensagem }}
</p> - No seu navegador em host local: 4200, tente inserir um nome de usuário que existe na matriz de nomes de usuários: Em seguida, tente inserir um nome de usuário que não tenha.
Usando ligação bidirecional para enviar dados ao desenvolver um aplicativo
A ligação bidirecional é útil para validação, verificações, cálculos e muito mais. Ele permite que os componentes se comuniquem e compartilhem dados em tempo real.
Você pode usar recursos de encadernação bidirecional em várias partes de um aplicativo. Depois de receber os dados do usuário, você pode executar a lógica de negócios e informar o usuário sobre os resultados.
Às vezes, você deseja armazenar os dados do usuário em um banco de dados. Você pode explorar diferentes tipos de provedores de banco de dados que pode usar, incluindo o Firebase NoSQL Database.
