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?