时间戳

首页 > 解决方案 > 角度形式不采用初始值

angular - 角度形式不采用初始值

问题描述

在我创建的表单中，输入将预设为来自{{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;
  });
}

标签： angularformsangular-materialangular-forms

解决方案

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

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

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

推荐阅读