I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione.

Di Sharlene Khan
CondividereTwittaCondividereE-mail

Con l'associazione bidirezionale, i tuoi componenti possono condividere dati, gestire eventi e aggiornare i valori in tempo reale.

L'associazione bidirezionale consente agli utenti di inserire dati dal file HTML e inviarli al file TypeScript e viceversa. Ciò è utile per la convalida dell'input, la manipolazione e altro.

Una volta passati i dati dall'HTML al file TypeScript, è possibile utilizzare i dati per completare determinate logiche di business. Uno scenario di esempio potrebbe essere se si desidera verificare se il nome immesso in un campo di input esiste già.

Come puoi usare l'associazione a due vie?

L'associazione bidirezionale nelle app Angular è solitamente impostata nel file .html file, utilizzando il ngModel direttiva. L'associazione a due vie in un modulo di input può essere simile a questa:

instagram viewer
<ingresso 
tipo="e-mail"
id="e-mail"
nome="e-mail"
segnaposto="[email protected]"
[(ngModel)]="indirizzo e-mail"
/>

Nel .ts file, il indirizzo e-mail la variabile è associata all'emailAddress dal modulo.

e-mail: String = ''; 

Come impostare un modulo di esempio in un'app Angular

Creando un'app di base, puoi utilizzare l'associazione bidirezionale per verificare se esiste già un potenziale nome utente.

  1. Creare un nuova app angolare.
  2. Corri il ng generare componente comando per creare un nuovo componente. Qui è dove memorizzerai il modulo.
    ng genera componente username-checker-form
  3. Sostituisci tutto il codice nel tuo app.component.html file con i seguenti tag:
    <modulo-controllo-nome-utente-app></app-username-checker-form>
  4. Aggiungi il seguente CSS nei tuoi nuovi componenti .css file, che si trova in username-checker-form.component.css, per definire lo stile del modulo:
    .contenitore {
    display: flessibile;
    text-align: centro;
    giustifica-contenuto: centro;
    align-items: centro;
    altezza: 100 vh;
    }

    .carta {
    larghezza: 50%;
    colore di sfondo: peachpuff;
    bordo-raggio: 1rem;
    imbottitura: 1rem;
    }

    ingresso {
    confine: 3px solido #1a659e;
    bordo-raggio: 5px;
    altezza: 50px;
    altezza della riga: normale;
    colore: #1a659e;
    blocco di visualizzazione;
    larghezza: 100%;
    dimensionamento della scatola: border-box;
    utente-Selezionare: auto;
    dimensione carattere: 16px;
    imbottitura: 0 6px;
    padding-sinistra: 12px;
    }

    ingresso:messa a fuoco {
    confine: 3px solido #004e89;
    }

    .btn {
    blocco di visualizzazione;
    contorno: 0;
    cursore: puntatore;
    confine: 2px solido #1a659e;
    raggio del bordo: 3px;
    colore: #F F F;
    sfondo: #1a659e;
    dimensione carattere: 20px;
    font-weight: 600;
    altezza della riga: 28px;
    imbottitura: 12px 20px;
    larghezza: 100%;
    margine superiore: 1rem;
    }

    .btn: al passaggio del mouse {
    sfondo: #004e89;
    confine: #004e89;
    }

    .successo {
    colore: #14ae83;
    }

    .errore {
    colore: #fd536d;
    }

  5. Aggiungi il seguente CSS in src/styles.css per impostare la famiglia di caratteri, lo sfondo e i colori del testo dell'intera app:
    @importazione URL("https://fonts.googleapis.com/css2?family=Poppins: peso@300;400&visualizzazione=scambio");

    corpo {
    famiglia di font: "Poppins";
    colore di sfondo: papayawhip;
    colore: #1a659e;
    }

  6. Sostituisci il codice in username-checker-form.component.html, per aggiungere il modulo di controllo del nome utente:
    <classe div="contenitore">
    <classe div="carta">
    <h1> Verifica nome utente </h1>

    <modulo>
    <ingresso
    tipo="testo"
    id="nome utente"
    nome="nome utente"
    segnaposto="Inserisci un nome utente"
    />
    <classe pulsante="btn"> Salva </button>
    </form>

    </div>
    </div>

  7. Esegui la tua app utilizzando il comando ng serve nel terminale.
    ng servire
  8. Visualizza la tua candidatura su http://localhost: 4200/.

Invio di dati tra i file HTML e TypeScript

Usa l'associazione bidirezionale per inviare i dati al tuo .ts file e torna al file .html file. Questo è possibile con l'uso di ngModel nella forma ingresso tag.

  1. Importa il FormsModule dentro app.module.ts file e aggiungerlo al file importazioni vettore:
    importare {FormsModule} da '@angular/forme';

    @NgModule({
    //...
    importazioni: [
    // altre importazioni
    FormsModule
    ],
    //...
    })

  2. Dichiara un nome utente variabile di classe in .ts file, username-checker-form.component.ts:
    nome utente: stringa = '';
  3. In username-checker-form.component.html, aggiungere [(ngModello)] con il nome utente variabile nel tag di input. Ciò abilita l'associazione bidirezionale e qualsiasi cosa digitata nell'input del nome utente del modulo viene assegnata alla variabile nome utente nel file .ts file.
    <ingresso
    tipo="testo"
    id="nome utente"
    nome="nome utente"
    segnaposto="Inserisci un nome utente"
    [(ngModel)]="nome utente"
    />
  4. Per verificare che i dati vengano inviati al .ts file, creare un file salva() metodo dentro username-checker-form.component.ts. Quando si invia il modulo, l'applicazione chiamerà questa funzione.
    salva(): vuoto {
    consolare.tronco d'albero(Questo.nome utente);
    }
  5. Aggiungi il ngSubmit direttiva al
    tag dentro username-checker-form.component.htmle chiama il metodo save().
    <modulo (ngSubmit)="salva()">
  6. Facendo clic sul pulsante Salva, il salva() la funzione stamperà il valore immesso nel campo di input nella console. Puoi visualizzare la console in fase di esecuzione utilizzando gli strumenti per sviluppatori del browser. Se non hai familiarità con il browser DevTools o non visualizzi la console, puoi saperne di più come usare Chrome DevTools.
  7. Invia il nome utente ritorno al .html file. Aggiungi la variabile username tra parentesi graffe al file username-checker-form.component.html file, dopo il
    tag. Utilizzare le parentesi graffe per visualizzare il valore memorizzato nella variabile username.
    <h2 *ngIf="nome utente"> Nome utente inserito: {{ username }} </h2>
    Il modulo dovrebbe mostrare i dati inseriti contemporaneamente.
  8. In username-checker-form.component.ts, aggiungi alcune variabili di classe per verificare se il nome utente esiste già. Dichiara un nomi utente array con alcuni nomi utente presi e aggiungi a Messaggio stringa che informa l'utente del controllo. La variabile isValidNomeutente è true se il nome utente immesso non è nell'array usernames.
    nomi utente: stringa[] = [ 'bart', 'Lisa', 'friggere', 'leela' ];
    messaggio: stringa = '';
    isValidNome utente: booleano = falso;
  9. IL salva() Il metodo dovrebbe verificare se il nome utente immesso è già nell'array dei nomi utente esistente o meno. A seconda del risultato, il messaggio verrà impostato di conseguenza.
    salva(): vuoto {
    if (this.username != '') {
    Questo.isValidUsername = !Questo.usernames.includes(
    Questo.nome utente.toLowerCase()
    );

    Se (Questo.isValidUsername) {
    Questo.messaggio = `Il tuo nuovo nome utente è '${Questo.nome utente}'`;
    } altro {
    Questo.messaggio = `Il nome utente '${Questo.nome utente}'è già stato preso';
    }
    }
    }

  10. Completa il username-checker-form.component.html file mostrando se il nome utente inserito esiste o meno. Aggiungi un messaggio di errore sotto il file

    tag dopo il form. IL isValidNomeutente variabile è utile qui per determinare il colore del messaggio visualizzato.
    <p *ngIf="nome utente" [ngClass]="isValidUsername? 'successo': 'errore'">
    {{ Messaggio }}
    </P>

  11. Nel tuo browser all'indirizzo host locale: 4200, tenta di inserire un nome utente esistente nell'array usernames: Quindi, prova a inserire un nome utente che non lo fa.

Utilizzo dell'associazione bidirezionale per inviare dati durante lo sviluppo di un'applicazione

L'associazione bidirezionale è utile per la convalida, i controlli, i calcoli e altro ancora. Consente ai componenti di comunicare e condividere dati in tempo reale.

È possibile utilizzare le funzionalità dell'associazione bidirezionale in varie parti di un'app. Una volta ricevuti i dati dall'utente, è possibile eseguire la logica aziendale e informare l'utente dei risultati.

A volte, vorresti archiviare i dati dell'utente in un database. Puoi esplorare diversi tipi di provider di database che puoi utilizzare, incluso il database NoSQL di Firebase.

Come archiviare, aggiornare, eliminare e recuperare dati da un database Firebase utilizzando Angular

Leggi Avanti

CondividereTwittaCondividereE-mail

Argomenti correlati

  • Programmazione
  • Programmazione
  • HTML
  • Sviluppo web

Circa l'autore

Sharlene Khan (50 articoli pubblicati)

Shay lavora a tempo pieno come sviluppatore di software e si diverte a scrivere guide per aiutare gli altri. Ha una laurea in informatica e ha precedenti esperienze in Quality Assurance e tutoraggio. Shay ama giocare e suonare il piano.

Altro da Sharlene Khan

Commento

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti