Reactive Forms

Configure the Module

import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { NgxEditorModule } from 'ngx-editor';

@NgModule({
  declarations: [AppComponent],
  imports: [
    CommonModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    NgxEditorModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Component

app.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { NgxEditorValidators } from 'ngx-editor';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
  form = new FormGroup({
    editorContent: new FormControl(null, [NgxEditorValidators.required()]),
  });

  ngOnInit(): void {
    this.editor = new Editor();
  }

  ngOnDestroy(): void {
    this.editor.destroy();
  }
}

Template

app.component.html

<form [formGroup]="form">
  <ngx-editor [editor]="editor" formControlName="editorContent"></ngx-editor>
</form>

Validators

import { NgxEditorValidators } from 'ngx-editor';

NgxEditorValidators.required(schema); // pass schema if you are using a custom schema else leave it empty
NgxEditorValidators.maxLength(maxLength, schema);
NgxEditorValidators.minLength(minLength, schema);

Validators is still available as a backwards-compatible export, but NgxEditorValidators avoids name conflicts with Angular’s own Validators helper.

Enable or disable the editor via Forms API

If using reactive forms, enabling and disabling of the component should be accomplished by enabling or disabling the form control rather than through the html disabled attribute.

For example:

this.form.get('editorContent').disable();
this.form.get('editorContent').enable();