Store form of Rich Text Data using Angular & Laravel Api

Muhammad Shahzaib 0
Viewed 33

I've created a form with field Rich Text Editor in angularJs using Quill-Editor.

I want to save form data along with Rich Text Editor using Laravel.

My view

<form>
   <div class="form-group mb-4">
      <label for="heading">Heading</label>
      <input type="text" name="name" class="form-control">
   </div>
   <div class="form-group mb-4">
      <label for="image">Image</label>
      <input type="file" name="image" class="form-control">
   </div>
   <div class="form-group">
      <label for="editor"><h3>Description</h3></label>
      <quill-editor [styles]="{height: '400px'}" [modules]="editorModules" (onEditorChanged)="changedEditor($event)"></quill-editor>
   </div>
</form>

Component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { EditorChangeContent, EditorChangeSelection } from 'ngx-quill';

@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.scss']
})
export class PostsComponent implements OnInit {

  editorText = '';

  constructor() { }

  ngOnInit(): void {
  }

  changedEditor(event: EditorChangeContent | EditorChangeSelection){
    this.editorText = event['editor']['root']['innerHTML'];
  }
}

How Can I save the data in database.

quill richtextbox api laravel angular
1 Answers

You can use patchValue to set the value after the api call is done!

ts

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

import Quill from 'quill';
import { Subscription } from 'rxjs';
import { TestService } from './test.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  subscription: Subscription = new Subscription();
  form: FormGroup;
  html: string;

  quillConfig = {
    toolbar: {
      container: [
        ['bold', 'italic', 'underline', 'strike'],
        [{ size: ['xsmall', 'small', 'medium', 'large', 'xlarge'] }],
        [{ align: [] }],
        ['clean'],
        ['link'],
      ],
    },
  };

  constructor(private testService: TestService) {}

  ngOnInit() {
    this.form = new FormGroup({
      text: new FormControl(''),
    });

    //make the api call and set the value inside ngx-quill
    this.subscription.add(
      this.testService.getData().subscribe((response) => {
        this.form.patchValue({ text: response }); // <-    changed here
      })
    );
  }

  onContentChanged = (event) => {
    //console.log(event.html);
  };

  public logValue(): void {
    const element = document.querySelector('.ql-editor');
    this.html = element.innerHTML;
  }

  public logForm(): void {
    setTimeout(() => {
      console.log(this.form);
      console.log(`DIRTY: ${this.form.dirty}`);
      console.log(`TOUCHED: ${this.form.touched}`);
    });
  }

  public blur(): void {
    console.log('blur');
  }

  public onSelectionChanged(): void {
    console.log('onSelectionChanged');
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

html

<p>
Type anything in Quill editor, then click `Log` button. Value of <code>touched</code> = false
</p>
<p>Refresh, then type anything in textarea, then click `Log` button. Value of <code>touched</code> = true
</p>
<p>I would expect the value of <code>touched</code> to be true in first case also</p>
<div [formGroup]="form">
  <quill-editor
    placeholder="Enter Text"
    formControlName="text"
    [modules]="quillConfig"
    (onBlur)="blur()"
    (onSelectionChanged)="onSelectionChanged()">
  </quill-editor>
</div>
  
<div [formGroup]="form">
  <textarea formControlName="text"></textarea>
</div>
<button (click)="logForm()">Log</button>

service

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Injectable()
export class TestService {
  constructor() {}

  getData(): Observable<any> {
    // used to simulate an API call
    return of('response from api').pipe(delay(2000));
  }
}

forked stackblitz

Naren Murali0
Related