Angular form submission: Redirecting to success message on a separate page

Question

Angular form submission: Redirecting to success message on a separate page

When a user submits a form on my website, they are redirected to another page where a success message is displayed.

Below is the code from the article-update.component.html file:

<form class="form-horizontal" [formGroup] = 'articleUpdateForm' (ngSubmit) = 'onSubmit()' enctype="multipart/form-data">
  <label for="articleTitle">Title</label>
    <input class="form-control" type="text" id="articleTitle" formControlName="title" [ngClass]="{ 'is-invalid': submitDisable && formValues.title.errors }" />
  <label>Description</label>
     <textarea formControlName='description' id="summernote" class="summernote"></textarea>
      <button class="btn btn-info" type="submit">Update</button>
</form>

The content of the article-update.component.ts file is as follows:

import { Component, OnInit } from '@angular/core';
   import {FormBuilder, FormControl, FormGroup, ValidatorFn, Validators} from '@angular/forms';
 
 @Component({
 selector: 'kt-article-update',
 templateUrl: './article-update.component.html',
 styleUrls: ['./article-update.component.scss']
 })
 export class ArticleUpdateComponent implements OnInit {
   // Code for the component...
 }

angular typescript logic

Answer 1

Answer №1

article-service.ts file

import { ApiService } from './api.service';
import { Observable } from 'rxjs';
import { BehaviorSubject } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable()
export class ArticleService {

  private _articleModified: BehaviorSubject<boolean> = new BehaviorSubject(false);
  public readonly articleModified$: Observable<boolean> = this._articleModified.asObservable();

  constructor(private apiService: ApiService) { }

  updateArticle(formData, d): Promise<any> {
    return new Promise((resolve, reject) => {
      this.apiService.post('/updateArticle', formData).subscribe((result: any) => {
        this._articleModified.next(true);
        resolve(result.status)
      }, (error) => {
        this._articleModified.next(false);
        reject(error.messages ? error.messages : error.message);
      });
    });
  }
}

article-list.component.ts file

import { Subscription } from 'rxjs';
import { ArticleService } from './../../services/article.service';
import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-article-list',
  templateUrl: './article-list.component.html',
  styleUrls: ['./article-list.component.css']
})
export class ArticleListComponent implements OnInit,OnDestroy {

  updateMessage: boolean;
  articleUpdateSubscription: Subscription;

  constructor(
    private articleService: ArticleService
  ) { }

  ngOnInit() {
    this.articleUpdateSubscription = this.articleService.articleUpdated$.subscribe(isModified => {
      this.updateMessage = isModified;
    });
  }

  ngOnDestroy(){
    if(this.articleUpdateSubscription)
      this.articleUpdateSubscription.unsubscribe();
  }
}

Answer 2

article-service.ts file

import { ApiService } from './api.service';
import { Observable } from 'rxjs';
import { BehaviorSubject } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable()
export class ArticleService {

  private _articleModified: BehaviorSubject<boolean> = new BehaviorSubject(false);
  public readonly articleModified$: Observable<boolean> = this._articleModified.asObservable();

  constructor(private apiService: ApiService) { }

  updateArticle(formData, d): Promise<any> {
    return new Promise((resolve, reject) => {
      this.apiService.post('/updateArticle', formData).subscribe((result: any) => {
        this._articleModified.next(true);
        resolve(result.status)
      }, (error) => {
        this._articleModified.next(false);
        reject(error.messages ? error.messages : error.message);
      });
    });
  }
}

article-list.component.ts file

import { Subscription } from 'rxjs';
import { ArticleService } from './../../services/article.service';
import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-article-list',
  templateUrl: './article-list.component.html',
  styleUrls: ['./article-list.component.css']
})
export class ArticleListComponent implements OnInit,OnDestroy {

  updateMessage: boolean;
  articleUpdateSubscription: Subscription;

  constructor(
    private articleService: ArticleService
  ) { }

  ngOnInit() {
    this.articleUpdateSubscription = this.articleService.articleUpdated$.subscribe(isModified => {
      this.updateMessage = isModified;
    });
  }

  ngOnDestroy(){
    if(this.articleUpdateSubscription)
      this.articleUpdateSubscription.unsubscribe();
  }
}

Angular form submission: Redirecting to success message on a separate page

Answer №1

Similar questions

Applying the spread operator in the map function for copying objects

Utilizing a nested interface in Typescript allows for creating more complex and

What is the best way to merge the results of several runs of an observable function

An error has occurred: module @angular-devkit/build-angular/package.json could not be located

How can we incorporate an algorithmic solution into an Angular brand carousel?

Upon setting up 'next-auth@beta' on the server, I encountered the [ERR_REQUIRE_ESM] Error

Can we use a switch statement instead of having multiple @Input()s in Angular?

Verifying the eligibility of a value for a union type

Property missing in Typescript type definition

Communication among sub applications is crucial for the success of Micro Frontends

Typescript: Implementing a generic function with the flexibility of an optional parameter

Autocomplete in Angular causing TypeError: Unable to access 'filter' property of undefined

Angular 4 Filtering Pipe: Simplify Data Filtering in Angular

Bring in all Functions and Interfaces from the Types Definition

Attempting to install angular-in-memory-web-api using npm, but encountering various errors in the process

Custom date ranges in ngx-bootstrap datepicker

Retrieving the latest status array by index using Typescript in Angular

Unraveling the mystery of nested optional indexes in interfaces

How can I enable the feature of automatic address population when entering a PIN CODE in an Angular application?

When attempting to upload a file using Angular HttpClient with form data and file, I encountered an issue where multer was unable to fetch