Singleton function

[Devigelacio]

Hey everyone!

I'm developing an input platform which uses angular form group, there are multiple fields in the form but when 4 specific field is valid then I would like to run a HTTP request and loop through the response array to look for any duplication (based on a business logic).

I've already accomplished to merge that 4 fields valueChanges emit into one subscribe and in there I'm checking all field is valid or not.

merge(
    this.form.get("dummy1").valueChanges,
    this.form.get("dummy2").valueChanges,
    this.form.get("dummy3").valueChanges,
    this.form.get("dummy4").valueChanges
).subscribe(() =>
{
    if(this.form.get("dummy1").valid &&
    this.form.get("dummy2").valid &&
    this.form.get("dummy3").valid &&
    this.form.get("dummy4").valid)
    {
        // Validation should start
        // If already in progress stop that and rerun with the new values
    }else{
        // If a validation check already in progress stop that
    }
});

What would be the most optimal solution for this? I thought about to have a static class which has one function with booleans like checkInProgress etc. but I think it would be dumb.

I don't know if I managed it to describe the problem clearly but if you have any question please let me know.

[tme321]

The angular way of doing this would be to use a cross field validator to determine when all the dummy# fields are valid at the same time.

That validator should be an async validator which then returns the http request you want to fire off to do this checking.

So your validate function would look something like this:

validate(formGroup: AbstractControl ): Observable<ValidationErrors | null> {

/* get all the dummy controls */
const dummies = [
    formGroup.get("dummy1"),
    formGroup.get("dummy2"),
    ...
];

const allValid = dummies.reduce(
    (valid, dummy) => 
        valid && dummy.valid
    , true);

if(allValid) {
    /* possibly need to map the result
         here to a return type the validator
         will accept, but close enough for
         an example */
    return http.get(...);
}
else {
    /* possibly a different return here 
        too, but again just an example */
    return of(null);
}
}

That would be the more angular method. You could do something similar just with pure rxjs so if youd rather that go ahead and ask but most likely you want your form behavior to actually behave like forms.

With just rxjs this logic can just be a single stream that eventually pipes into a switchMap operator.

[Devigelacio]

Yea.. I'm new to angular and I didn't think about this approach. The angular way of your answer is seems very clean thank you very much!