matInput 值未更新

Question

我有一个这样的用户名和密码的表单输入字段，

 <mat-form-field class="mdb-form-field-modal form-adjustments">
    <input (keydown)="emailBtnFocus($event)" tabindex="0" matInput placeholder="username" formControlName="username">
        <mat-error *ngIf="username.hasError('email') && !username.hasError('required')">
        {{ signInEmailErrorText }}
        </mat-error>
    <mat-error *ngIf="username.hasError('required')">
        {{requiredError }}
    </mat-error>
</mat-form-field>

export class SignInComponent implements OnInit {
    signInForm: FormGroup;
  username = new FormControl('', [
    Validators.required, Validators.email
  ]);

  ngOnInit() {
    this.authState = this.store.select('auth');
    this.signInForm = new FormGroup({
      'username': this.username,
      'password': this.password,
      'staySignedIn': this.staySignedIn
    });

  }
  // Submit Logic.
  onSignInSubmit() {
    console.log('SignInForm:', this.signInForm);
   //logic for submit goes here
  }
}

当我点击提交时，该值仍然为空，我不知道为什么。有人可以帮我解决这个问题吗？

Answer 1

这样做：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class SignInComponent implements OnInit {
signInForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.authState = this.store.select('auth');
    this.signInForm = this.formBuilder.group({({
      'username': ['', [Validators.required, Validators.email]],
      'password': ['', Validators.required],
      'staySignedIn': ['']
    });

  }
  // Submit Logic.
  onSignInSubmit() {
    console.log('SignInForm:', this.signInForm);
   //logic for submit goes here
  }
}