Angular 表单不接受初始值

Question

在我创建的表单中，输入将预设为 {{userPrivate.email}}

中的值

它显示在表单上，但是当我尝试不加修改地提交时，它显示其中的值是空的，除非我尝试更改它。

我想让它即使字段不变，我仍然可以提交 userPrivate.email

的值

这是 html

<div class="card">
  <div *ngIf="(user$ | async) as user" class="card-body">
    <div class="row" *ngIf="(userPrivate$ | async) as userPrivate">
      <form (ngSubmit)="this.updateEmail(password.value, email.value)" class="container" [formGroup]="changeEmail">
        <mat-form-field>
         <input matInput type="text" placeholder="New Email" formControlName="email" value="{{userPrivate.email}}" >
        </mat-form-field>
        <button mat-raised-button type="button" class="mb-3" (click)="verifyEmail()"  *ngIf="!userEmail">
          <span *ngIf="!loading">Update Email</span>
          <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
        </button>
        <mat-form-field *ngIf="userEmail">
          <input matInput type="text" placeholder="Password" formControlName="password"  >
        </mat-form-field>
        <button mat-raised-button type="submit" class="mb-3" *ngIf="userEmail">
          <span *ngIf="!loading">Confirm</span>
          <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
        </button>
      </form>
    </div>
  </div>
</div>

以及我在 ts 中调用的函数

ngOnInit() {

  this.changeEmail = this.fb.group({
    email: ['', [
      Validators.required,
      Validators.email
    ]],
    password: ['',
      Validators.required
    ]
  });
}
// Use getters for cleaner HTML code
get email() { return this.changeEmail.get('email')}
get password() { return this.changeEmail.get('password')}
verifyEmail() {
  this.userEmail = true;
}
updateEmail(password, email) {
  this.loading = true;
  debounceTime(300);
  this.authService.changeEmail(password, email).then(() => {
    this.loading = false;
    this.userEmail = false;
  });
}

Answer 1

您正在为 init 上的控件分配空值

email: ['', [
  Validators.required,
  Validators.email
]],

尝试在创建表单时向控件中的第一个参数提供数据

Answer 2

在创建表单时传递您的值或通过 setValue/patchValue

 ngOnInit() {    
      this.changeEmail = this.fb.group({
        email: [userPrivate.email, [
          Validators.required,
          Validators.email
        ]],
        password: ['',
          Validators.required
        ]
      });
    }

Angular 表单不接受初始值

Angular form not taking in initial value

angular

forms

angular-material

angular-forms