Блог

У меня есть следующая простая форма. Я хочу кнопку, которая проверяет, доступно ли имя пользователя в одном конкретном поле. Если имя пользователя доступно, то основная кнопка отправки включена. Как мне этого добиться? Это форма внутри формы?

 <form mat-dialog-content [formGroup]="myForm"> 
<mat-form-field>
  <input matInput formControlName="firstName" />
  <mat-error>{{ error }}</mat-error>
</mat-form-field>

<mat-form-field>
  <input matInput  formControlName="lastName" />
  <mat-error>{{ error }}</mat-error>
</mat-form-field>

<mat-form-field>
  <input matInput formControlName="username" />
  <mat-error>{{ error }}</mat-error>
</mat-form-field>

//This button needs to be disabled unless username is filled out.  If user changes username the main submit button should be disabled unless user checks with this button.
<button (click)="userNameCheck()" >Check if available</button>


<mat-form-field>
  <input matInput formControlName="notes" />
  <mat-error>{{ error }}</mat-error>
</mat-form-field>

<button (click)="save()" [disabled]="myForm.invalid">Submit</button>
</form>

export const FORM_CONTROLS = {
  firstName: [null, Validators.required],
  lastName: [null, Validators.required],
  username: [null, Validators.required],
  notes: [null],
}


this.myForm = this.formBuilder.group(FORM_CONTROLS);

save() {
    const myData  = this.myForm.value;
    this.myService.saveData(myData);
}
  

Иметь форму внутри формы — плохая практика. «форма не должна содержать других элементов формы. Запреты HTML

Лучшим подходом было бы объявить свойство, например, usernameCheckField и включить его в привязку формы к ngModel см. Пример ниже

 <input type="password" [(ngModel)] = "usernameCheckField" [ngModelOptions]="{standalone: true}" />
  

обратите внимание на [ngModelOptions]="{standalone: true}" . Это позволит вам использовать шаблон, управляемый для модели, внутри модели реактивных форм.

Лучшим подходом к проверке, существует ли пользователь, было бы подписаться на valueChanges свойство username поля в вашем ngOnInit крючке жизненного цикла

 ngOnInit() {
  this.myForm.get("username").valueChanges.pipe(
    mergeMap((username) => this.myService.checkIfUserExists(username)),
    tap(res => {
      // Do some operations here
    })
  ).subscribe()
}
  

Не забудьте отказаться от подписки!. Вы можете рассмотреть возможность использования takeWhile операторов takeUntil из rxjs/operators для этого