Question

我有一个可以正常工作并提交所有字段的Angular表单。但是-我想创建一个仅将一个字段（用户名）发送到端点以查看用户名是否可用的按钮。

我如何只在1个字段中零位来执行操作？

Answer 1

FYI Angular确实比这更强大。您可以使用反应式表单并编写自己的自定义验证程序，该验证程序即使不按按钮也可以实时检查userName是否可用。

示例：假设您有一个这样的表单

var form = this._formBuilder.group({
 userName:['',this.userNameValidator],
 password:''
 ... other fields
})

这是验证器的发生方式

userNameValidator(control:AbstractControl) {
 const userName = control.value;
 const isValidUserName = // do your necessary validation
 return isValidUserName ? {isValidUserName : false}:null;
}

更多信息：Official Docs和一个A nice blog

Answer 2

您可以使用get方法从FormGroup中提取特定控件

username = this.myForm.get('username')

如果您已经实施了反应式表格，请考虑以下方法

在您的TS文件中


// Create a Subject Observable to track the click event
checkUserExistsSubject$ = new Subject();
checkUserExistsAction$ = checkUserExistsSubject$.asObservable();

// Declare your form using FormBuilder
myForm = this.fb.group({
  username: ['', [Validators.required, ...]]
  ...
})

// Declare an observable to track the value changes
usernameChanged$ = this.myForm.get('username').valueChanges;

// Combine the two Observable using combineLatest from rxjs

checkUserExists$ = combineLatest([this.usernameChanged$, this.checkUserExistsAction$]).pipe(
  map(([username]) => username)
)
ngOnInit() {
  this.checkUserExists$.pipe(
    // Pipe the mergeMap/swithMap etc operator from rxjs/operators
    mergeMap(username => {

        // return the Observable calling
        return this.userService.checkUserExists(username)
      }
    )
  ).subscribe({
    next: (res) => {
      // Do something with the response
    }
  })
}

在您的HTML文件中

<button (click)='checkUserExistsSubject$.next()' ... >Check User</button>

角度形式-仅提交某些字段

2 个答案: