Очень простой пример ngmodel

Question

У меня есть простая форма

<form role="form" (submit)="login()">
  <input type="text" name="username" id="username" placeholder="Username" required="required" [ngModel]="credentials.username"/>
  <input type="password" name="password" id="password" placeholder="Password" required="required" [ngModel]="credentials.password" />
  <button type="submit" id="btnLogin" class="btn btn-atp btn-block btn-large">Sign in</button>
  </div>
</form>

и компонент ts.

    export class LoginComponent implements OnInit {

  credentials = {username: '', password: ''};

  constructor(private loginService: LoginService, private http: HttpClient, private router: Router) {
  }

  ngOnInit() {
  }

  login() {
    console.log(this.credentials);
    this.loginService.authenticate(this.credentials, () => {
      this.router.navigateByUrl('/');
    });
    return false;
  }

}

service

   authenticate(credentials, callback) {
    console.log(credentials);
    const headers = new HttpHeaders(credentials ? {
      authorization : 'Basic ' + btoa(credentials.username + ':' + credentials.password)
    } : {});

Моя проблема в том, что учетные данные всегда ''.Разве ngmodel не должен обновлять эти значения автоматически?

Answer 1

Вы должны использовать [(ngModel)], чтобы установить такие значения, как это -

<input type="text" name="username" id="username" placeholder="Username" required="required" [(ngModel)]="credentials.username"/>
  <input type="password" name="password" id="password" placeholder="Password" required="required" [(ngModel)]="credentials.password" />

На данный момент вы используете [ngmodel], который является просто привязкой атрибута, чтобы установить значение в DOM и отобразить его обратно.

Но если вы хотите обновить значение из части представления, вы должны использовать двустороннюю привязку данных [(ngModel)]

Answer 2

Вы должны использовать [(ngModel)] вместо [ngModel]

<input type="text" name="username" id="username" placeholder="Username" required="required" [(ngModel)]="credentials.username"/>
<input type="password" name="password" id="password" placeholder="Password" required="required" [(ngModel)]="credentials.password" />

, потому что [( в Angular сигнализирует two-way привязку данных .Теоретически вы можете связать только событие (ngModel) или значение [ngModel].Но в этом случае вам нужно использовать two-way привязку данных : [(ngModel)]