每次单击按钮时，如果模型表单无效，则返回通知消息，而不继续创建用户（createUser）。
如果没有表单验证错误，它应该只继续返回 this.accountService.create
该功能是否干净且正确地实现？是否存在导致该问题的一些主要问题？谢谢。
我在哪里放置 checkInputs 验证，如果存在验证错误，则不应继续处理 this.accountService.create
#html代码
<button #createUserBtn mat-flat-button color="primary" >Create
User</button>
＃代码
@ViewChild('createUserBtn', { static: true, read: ElementRef })
button: ElementRef;
ngAfterViewInit(): void {
fromEvent(this.button.nativeElement, 'click')
.pipe(
tap(x => x),
exhaustMap(ev => {
return this.createUser();
})
)
.pipe(tap(x => x))
.subscribe(this.handleResponse());
}
createUser(): Observable<any> {
this.checkInputs();
this.isInProgress = true;
this.modelForm.markAllAsTouched();
return this.accountService.create(this.modelForm.value).pipe(
finalize(() => (this.isInProgress = false))
);
}
handleResponse(): any {
return {
next: res => {
this.notificationService.showSuccess('User has been created successfully.');
this._router.navigate(['settings/user']);
},
error: err => {
this.notificationService.showError('Something went wrong, Try again later.');
this.isInProgress = false;
},
complete: () => this.isInProgress = false
};
}
checkInputs() {
if(this.userStatus == 'USER_ON_NO_ACCOUNT') {
if(!this.modelForm.get('firstName').value) {
this.notificationService.showError('First Name is required.');
return;
}
if(!this.modelForm.get('lastName').value) {
this.notificationService.showError('Last Name is required.');
return;
}
if(!this.modelForm.get('companyName').value) {
this.notificationService.showError('Company Name is required.');
return;
}
}
if(!this.modelForm.get('roleId').value) {
this.notificationService.showError('Security Role is required.');
return;
}
if(this.modelForm.get('roleId').value && this.modelForm.get('roleId').value !== 7 && !this.modelForm.get('isSso').value) {
this.notificationService.showError('SSO is required.');
return;
}
if(this.modelForm.get('roleId').value && this.modelForm.get('isSso').value && this.modelForm.get('isSso').value ==='Yes' && !this.modelForm.get('ssocredentials').value) {
this.notificationService.showError('SSO Credential is required.');
return;
}
if(this.modelForm.get('isSso').value ==='No') {
this.modelForm.get('ssocredentials').setValue(null);
}
}
您可以在invalid之前添加检查this.accountService.create(this.modelForm.value)，但您必须将click事件处理程序更改为如下所示：
click这种方式处理事件，相反，您可以直接从模板添加事件处理程序：<button mat-flat-button color="primary" (click)="createUser()">
Create User
</button>
createUser与其他可观察对象链接起来， 和 相同handleResponse。相反，您可以订阅方法accountService.create内的函数并在其中createUser处理success和fail，如下所示：createUser(): void {
this.checkInputs();
this.isInProgress = true;
this.modelForm.markAllAsTouched();
// here you can check if the form is valid or not:
if (this.modelForm.invalid) return;
this.accountService.create(this.modelForm.value)
.pipe(
// take(1) is used to complete the observable after the result comes.
take(1),
catchError((err) => {
this.notificationService.showError(
'Something went wrong, Try again later.'
);
this.isInProgress = false;
return EMPTY;
}),
finalize(() => (this.isInProgress = false))
)
.subscribe((res) => {
this.notificationService.showSuccess(
'User has been created successfully.'
);
this._router.navigate(['settings/user']);
});
}
ngAfterViewInit块、handleResponse方法和button @ViewChild，因为上面createUser会complete在从服务接收结果后直接处理这些和observable。本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句