[英]How to run function only when service variable state changed in component Angular4
I have service called as InfoFormService and it has a variable called isInValidating. 我有一个称为InfoFormService的服务,它有一个名为isInValidating的变量。
The variable is set as true when component invoke validateEmail(email) function as below. 当组件按如下所示调用validateEmail(email)函数时,将变量设置为true。
@Injectable()
export class InfoFormService {
private VALIDATE_EMAIL_URL: string = 'XXX';
isInValidating: boolean = false;
constructor(@Inject(APP_CONFIG) private config: AppConfig,
private http:Http
) {
console.log(this.config.apiEndpoint)
}
validateEmail(email) {
console.log(email)
this.isInValidating = true;
return this.http.get(`${this.config.apiEndpoint}/${this.VALIDATE_EMAIL_URL}${email}`)
}
}
And the component invoke validateEmail whenever email input text changed. 每当电子邮件输入文本更改时,该组件就会调用validateEmail。
Because ValidateEmail takes time, when I click submit button, the isInValidating value might be true or false, but once ValidateEmail action completed, the isInValidating value will set as false as above code. 因为ValidateEmail需要时间,所以当我单击“提交”按钮时,isInValidating值可能为true或false,但是一旦完成ValidateEmail操作,isInValidating值将设置为false,如上面的代码所示。
What I want is to delay submit action which happens when click Submit button until service's isInValidating value set as true. 我想要的是延迟单击“提交”按钮时发生的提交操作,直到服务的isInValidating值设置为true为止。
export class AbcBtnComponent implements OnInit {
constructor(private formService:InfoFormService) {
}
...
emailField.valueChanges
.filter(val => {
return val.length >= 1;
})
.debounceTime(100)
.switchMap(val => this.formService.validateEmail(val))
.subscribe(res => {
console.log(res)
let validation = res.json();
if (validation['valid']) {
emailField.setErrors(null);
} else {
emailField.setErrors({ validEmail: true });
}
this.formService.isInValidating = false;
});
onSubmit(value) {
// Here I want to delay until formService's isInValidating value = true
submitAction(value)
}
}
I guess that I have to use Subject or Observable, but have no idea how to use it. 我想我必须使用Subject或Observable,但不知道如何使用它。
Please help me! 请帮我!
In component 在组件中
get isInValidating(): boolean {
return this.formService.isInValidating;
}
In template 在模板中
<button type="submit" [disabled]="isInValidating">Submit</button>
this.formService.validateEmail(val))
.subscribe(res => {
this.formService.validateEmail(val)
.subscribe(res => {
..)
Technically if you subscribe to the validateEmail call and execute your code there, it should work. 从技术上讲,如果您订阅validateEmail调用并在那里执行代码,则它应该可以工作。 But I might have missunderstood your question.
但我可能误会了您的问题。
You could also just remove the isInValidating and have the onSubmit(value) inside like: 您也可以只删除isInValidating并在其中包含onSubmit(value),例如:
this.formService.validateEmail(val)).subscribe(res => {
//logic to check your validation
if(valid) this.onSubmit(val)
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.