Угловая форма не принимает начальное значение - PullRequest
Новая
       22

Угловая форма не принимает начальное значение

1 голос
/ 24 октября 2019

В форме, которую я создал, для ввода будет задано значение от {{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;
  });
}

Ответы [ 2 ]

1 голос
/ 24 октября 2019

Передавайте свое значение при создании формы или через setValue / patchValue 

 ngOnInit() {    
      this.changeEmail = this.fb.group({
        email: [userPrivate.email, [
          Validators.required,
          Validators.email
        ]],
        password: ['',
          Validators.required
        ]
      });
    }
1 голос
/ 24 октября 2019

Вы присваиваете пустое значение элементам управления при инициализации 

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

Попробуйте предоставить данные для первого аргумента в элементах управления при создании формы

...