Riferimento variabile del modello angolare

Question

Riferimento variabile del modello angolare

#1 da (0 voti)

1

Questo è un problema strano in Angular:

<input #pin1 type="password">
<p>You entered: {{pin1.value}}</p>

Se scrivi qualcosa in <input> , il contenuto di <p> non cambierà, il che significa che pin1.value non ha valore, vuol dire che la variabile di riferimento #pin1 non funziona?

D'altra parte, se aggiungiamo una funzione per passare il riferimento, funzionerà.

<input #pin2 type="password" (input)="test(pin2)">
<p>You entered: {{pin2.value}}</p>

dove test=function(x){console.log(x);}

Per questo <input> , se scriviamo qualcosa, il contenuto di <p> cambierà in testo corrispondente che implica #pin2 funziona.

Quindi non capisco perché dobbiamo farlo? perché dobbiamo usare la funzione per passare il riferimento variabile in primo luogo, quindi possiamo usarlo? Perché non possiamo semplicemente dichiarare una variabile di riferimento e quindi utilizzarla direttamente nell'espressione o nell'interpolazione del modello?

html javascript web angular2

posta Yui 19.12.2017 - 02:59

fonte

1 risposta

Leggi altre domande sui tag html javascript web angular2

Opzioni di commutazione del database per il ripristino di emergenza Lavoro in coda serializzato dall'entità, notifiche all'interfaccia utente

score 0 · Answer 1

Utilizza ngmodel per collegarsi ai valori nel modello:

<input id="name" name="name" class="form-control"
  required minlength="4" appForbiddenName="bob"
  [(ngModel)]="hero.name" #name="ngModel" >

o come componente:

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

@Component({
  selector: 'example-app',
  template: '
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>
      <button>Submit</button>
    </form>

    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>
  ',
})
export class SimpleFormComp {
  onSubmit(f: NgForm) {
    console.log(f.value);  // { first: '', last: '' }
    console.log(f.valid);  // false
  }
}

Riferimenti