Skip to content

Commit e024acf

Browse files
chore: docs
1 parent f93d32d commit e024acf

1 file changed

Lines changed: 31 additions & 0 deletions

File tree

README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ PayPal: [PayPal.Me/bengtler](http://paypal.me/bengtler)
6565
- show the differences between sanitizing and not sanitizing your content if your content format is html
6666
- usage of different content formats
6767
- template-driven and reactive forms
68+
- signal forms with custom formField
6869
- code + syntax highlighting
6970
- formulas
7071
- image resizing
@@ -417,6 +418,36 @@ or
417418
}
418419
```
419420

421+
## QuillEditorFieldComponent (experimental)
422+
423+
### Config
424+
425+
- basic usage as quill-editor-component
426+
- BUT:
427+
- used with `[formField]`
428+
- validation needs to be added manually via angular `form()`
429+
- min/maxLength and required validation happens with `quillEditor.validate({ required?: boolean; maxLength?: number; minLength? })`
430+
- disabled/readonly state should be set via angular `disabled()` and `readonly()` helpers in form definition
431+
432+
```HTML
433+
<quill-editor-field [formField]="form.editor" />
434+
```
435+
436+
```TS
437+
readonly quillfield = viewChild<QuillEditorFieldComponent>('quillField')
438+
439+
editorField = signal({ editor: '' })
440+
form = form(this.editorField, p => {
441+
// Add a synchronous required validator to 'editorField'.
442+
validate(p.editor, () => {
443+
return this.quillfield()?.validate({
444+
required: true,
445+
minLength: 5
446+
}) || null
447+
})
448+
})
449+
```
450+
420451
## QuillViewComponent, QuillViewHTMLComponent & How to present the editor content
421452

422453
In most cases a wysiwyg editor is used in backoffice to store the content to the database. On the other side this value should be used, to show the content to the enduser.

0 commit comments

Comments
 (0)