How can I use a single method to save or update an item from an observable?-CodePudding

This seems like a really silly question, but here I am. I am able to get my product, render the form & populate the values correctly.

In stead of having two methods create and update I would like to just have save. I am trying to figure out–based on the product$ observable what I can look for to see if I am working with an existing product or if I am creating a new one.

// product.component.ts

public product$ = this.productService.product$;

ngOnInit(): void {
    this.product$.pipe(tap((product) => console.log('product', product))).subscribe((product) => {
                this.form = new FormGroup({
                    name: new FormControl(product?.name, [
                        Validators.required,
                    ]),
                    description: new FormControl(product?.description, [
                        Validators.required,
                    ]),
                });
            });
}

...

// this is the goal
save(form: FormGroup): void {
    if (form.invalid) {
        return;
    }

    if(product$) {
        this.productService.update(...);
    } else {
        this.productService.create(...);
    }
}

I know I could possibly subscribe (again) to product$ but I feel like I've already got the value I need?

When creating a product, my url looks like example.com/products
When updating, the url will always be example.com/products/123

So I thought I could do something like:

if (this.activatedRoute.params.pipe(tap((route) => console.log(route)))) {
    console.log('existing');
} else {
    console.log('new');
}

I know I'm not able to get into the pipe to see what I've got, so I'm not sure what to try--but I feel like I have all of the info I need for such a simple thing. How can I check for the productId or something so I only need a save method?

CodePudding user response：

Make productId a hidden form control so when you save you can have a look at the form control value. Creating a form from an observable is a bad idea since you are going to create a new one everytime product update which is probably not something you want.

The form creation would look like that.

 this.form = new FormGroup({
                    name: new FormControl(product?.name, [
                        Validators.required,
                    ]),
                    description: new FormControl(product?.description, [
                        Validators.required,
                    ]),
                    productId: new FormControl(product?.productId, []),
                });

The save would look like that

save(form: FormGroup): void {
    if (form.invalid) {
        return;
    }

    if(form.controls['productId'].value !== null) {
        this.productService.update(...);
    } else {
        this.productService.create(...);
    }
}

CodePudding user response：

Don’t use an observable inside an if statement. It’s not a value. Instead the if logic should go inside the subscribe. And subscribe rather than tap. Tap is for debugging and for side effects mid stream. As a rule of thumb you want to do minimal side effects.


this.activatedRoute.params.pipe(take(1)).subscribe((route) => {
    // get the id from route
   
    if (id) {
        console.log('existing');
    } else {
        console.log('new');
    }
}