非常简单的 ngModel 示例

Question

I have a simple form

<form role="form" (submit)="login()">
  <input type="text" name="username" id="username" required="required" [ngModel]="credentials.username"/>
  <input type="password" name="password" id="password" required="required" [ngModel]="credentials.password" />
  <button type="submit">Sign in</button>
  </div>
</form>

and a component 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)
  } : {});
}

My problem is that the credentials are always '' . Shouldn't the ngModel update these values automatically?

Answer 1

You should use [(ngModel)] to set values like this -

<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" />

As of now, you are using [ngmodel] which is just attribute binding to set value into your DOM and display it back.

But if you want to update value from view part you should use two way data binding [(ngModel)]

Answer 2

You have to use [(ngModel)] instead of [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" />

because [( in Angular is signalling a two-way data binding . Theoretically you could only bind to an event (ngModel) or to a value [ngModel] . But in this case you need to use two-way data binding : [(ngModel)]