Tuesday, September 22, 2020

Angular 7 Ngx Editor Validation Working Example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 7 Ngx Editor Validation Working Example.

If you are new in Angular and then please check my old post related to Angular 7 for basics information.

I have already done the posts related to Angular Ngx Editor but, in this post, I will apply validation on Angular 7 Ngx Editor and here is the working code snippets. Please follow it carefully.

Angular 7 Ngx Editor Validation Working Example

1. Here are the basics query you need to run into your command prompt to install Angular 7 basic setup and Ngx Editore Package:

npm install -g @angular/cli 

ng new angularngxeditor //Create new Angular Project

$ cd angularngxeditor // Go inside the Angular Project Folder

npm install ngx-editor --save

npm install --save font-awesome angular-font-awesome

npm install ngx-bootstrap --save

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url


2. You need add below code into you app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgxEditorModule } from 'ngx-editor';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { HttpClientModule }    from '@angular/common/http';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }


3. Now you need to add below code into app.component.ts file:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, ReactiveFormsModule} from '@angular/forms';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'ngxeditormaxlenght';

  ngOnInit() {
  		this.formdata = new FormGroup({
          	faq_question : new FormControl("", [Validators.required, this.noWhitespaceValidator,
          		Validators.maxLength(400), Validators.minLength(5)]),

  public noWhitespaceValidator(control: FormControl) {
      const isWhitespace = (control.value || '').trim().length === 0;
      const isValid = !isWhitespace;
      return isValid ? null : { 'whitespace': true };

4. Now you need to add below code into app.component.html file:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
 <div class="jumbotron text-center">
  <h1>Angular Ngx Editior Validation</h1>
  <p>Have fun!!</p> 
 <div class="container">
 <form class="form" [formGroup] = "formdata" (ngSubmit)="on_submit(formdata.value)" novalidate method="post">
                  <div class="row">

                     <div class="col-md-12">
                        <div class="form-group" [ngClass]="{'error': formdata.controls.faq_question.errors && formdata.controls.faq_question.touched}">
                           <label for="NewQuestion">Type Anything</label>
                           <div class="input-group controls">

                              <app-ngx-editor required formControlName = "faq_question" id="NewQuestion" placeholder="New Question" height="100px" minHeight="100px" [placeholder]="'Enter text here...'" [spellcheck]="true" [(ngModel)]="htmlContent"></app-ngx-editor>

                              <div *ngIf="formdata.controls.faq_question.errors && formdata.controls.faq_question.touched" class="help-block clearfix mt-2">
                                <ul role="alert">
                                  <li class="alert-danger p-2">This is required min5 max 400</li>

                  <div class="row">
                     <div class="col-md-12 m-b-12 m-t-12">
                        <button type="submit" class="btn btn-success btn-lg waves-effect waves-light m-r-10" [disabled] = "!formdata.valid">Submit</button>



If you have any query related to this post, then please do comment below or ask questions.


Thank you

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.