Angular 被动表单-如何仅在表单中的一个字段上调用单独的操作

我有以下简单的表格。我想要一个按钮，检查用户名是否有一个特定的字段可用。如果用户名可用，则启用主提交按钮。我如何做到这一点？这是表格中的表格吗

<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);
}

{{error}}
{{error}}
{{error}}
//除非填写用户名，否则需要禁用此按钮。如果用户更改用户名，则应禁用主提交按钮，除非用户使用此按钮进行检查。
检查是否可用
{{error}}
提交
导出常量表单_控件={
firstName:[空，验证程序。必需]，
lastName:[空，验证程序。必需]，
用户名：[空，验证程序。必需]，
注：[null]，
}
this.myForm=this.formBuilder.group（FORM\u控件）；
保存（）{
const myData=this.myForm.value；
this.myService.saveData（myData）；
}

在表单中包含表单是一种不好的做法“表单不能包含其他表单元素。

最好的方法是声明一个属性，例如

usernameCheckField

，并将其包含在绑定到

ngModel

的表单中，请参见下面的示例

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

---

< > >强>不要忘记订阅！<强> >您可以考虑使用<代码>占用/代码>或代码> >直到运算符< <代码> RXJS/操作员< /P> >这是“推荐的方法”？这似乎是使用反应式的渐行渐远的形式？”欧文，请记住，当更改T时发生值更改。他输入，这假设几个呼叫service@KingKongFrog“推荐的”一词“正在使用异步验证程序：。另一种方法是，按钮始终处于启用状态，在提交之前，请检查电子邮件是否存在。@kingkongprog@Eliseo我提供了第二种方法，以确保您保持被动表单方法。对于几个调用问题，考虑管道<代码> DeBase[/Cuth]运算符，并设置一个用户类型和调用服务的时间间隔，而不是<代码> CyMeMaP <代码>使用<代码>开关图< /C> >在提供新的流时取消先前可观察的，在这种情况下，当用户类型时

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