在 Ionic 4 中出现 "No provider for NgControl" 错误
Getting "No provider for NgControl" error in Ionic 4
我在我的页面上添加了 Quilljs 编辑器。我正在尝试获取内容的价值。
我正在 YouTube 上关注一个名为 "Using Quill JS Text Editor With Angular 7" 的视频。我已按照所示完成所有操作,但出现此错误:
ERROR Error: Uncaught (in promise): Error: Template parse errors:
No provider for NgControl ("
<form [FormGroup="editorForm" (ngSubmit)="OnSubmit()"]>
<div class="form-group">
[ERROR ->]
<quill-editor formControlName="editor"></quill-editor>
</div>
<ion-button type="submit">
Submit</ion"): ng:///HomePageModule/HomePage.html@11:2
Error: Template parse errors:
No provider for NgControl ("
<form [formGroup]="editorForm" (ngSubmit)="OnSubmit()">
<div class="form-group">
[ERROR ->]
<quill-editor formControlName="editor"></quill-editor>
</div>
<ion-button type="submit">
Submit</ion"): ng:///HomePageModule/HomePage.html@11:2
at syntaxError (compiler.js:2420)
我的home.html
代码:
<ion-content class="ion-padding">
<form [formGroup]="editorForm" (ngSubmit)="OnSubmit()">
<div class="form-group">
<quill-editor formControlName="editor"></quill-editor>
</div>
<ion-button type="submit">Submit</ion-button>
</form>
The world is your oyster.
<p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
</ion-content>
home.ts
代码:
import { Component } from '@angular/core';
import { QuillModule } from 'ngx-quill';
import {FormGroup, FormControl} from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
editorForm: FormGroup;
ngOnInit(){
// console.log(quill.container.innerHTML);
this.editorForm = new FormGroup({
'editor': new FormControl(null)
})
}
OnSubmit(){
console.log(this.editorForm.get('editor').value);
}
}
我已经在 app.module.ts
和 home.module.ts
中导入了 FormsModule、ReactiveFormsModule,但没有任何效果。
如何解决此错误并获取 Quill 编辑器的值?
编辑 1
经过小码修正[括号],现在是:
Can't bind to 'formGroup' since it isn't a known property of 'form'.
请将 ReactiveFormsModule
添加到 HomeModule
的 imports
部分。
这是reactive forms guide的第一步。
我在我的页面上添加了 Quilljs 编辑器。我正在尝试获取内容的价值。
我正在 YouTube 上关注一个名为 "Using Quill JS Text Editor With Angular 7" 的视频。我已按照所示完成所有操作,但出现此错误:
ERROR Error: Uncaught (in promise): Error: Template parse errors:
No provider for NgControl ("
<form [FormGroup="editorForm" (ngSubmit)="OnSubmit()"]>
<div class="form-group">
[ERROR ->]
<quill-editor formControlName="editor"></quill-editor>
</div>
<ion-button type="submit">
Submit</ion"): ng:///HomePageModule/HomePage.html@11:2
Error: Template parse errors:
No provider for NgControl ("
<form [formGroup]="editorForm" (ngSubmit)="OnSubmit()">
<div class="form-group">
[ERROR ->]
<quill-editor formControlName="editor"></quill-editor>
</div>
<ion-button type="submit">
Submit</ion"): ng:///HomePageModule/HomePage.html@11:2
at syntaxError (compiler.js:2420)
我的home.html
代码:
<ion-content class="ion-padding">
<form [formGroup]="editorForm" (ngSubmit)="OnSubmit()">
<div class="form-group">
<quill-editor formControlName="editor"></quill-editor>
</div>
<ion-button type="submit">Submit</ion-button>
</form>
The world is your oyster.
<p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
</ion-content>
home.ts
代码:
import { Component } from '@angular/core';
import { QuillModule } from 'ngx-quill';
import {FormGroup, FormControl} from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
editorForm: FormGroup;
ngOnInit(){
// console.log(quill.container.innerHTML);
this.editorForm = new FormGroup({
'editor': new FormControl(null)
})
}
OnSubmit(){
console.log(this.editorForm.get('editor').value);
}
}
我已经在 app.module.ts
和 home.module.ts
中导入了 FormsModule、ReactiveFormsModule,但没有任何效果。
如何解决此错误并获取 Quill 编辑器的值?
编辑 1
经过小码修正[括号],现在是:
Can't bind to 'formGroup' since it isn't a known property of 'form'.
请将 ReactiveFormsModule
添加到 HomeModule
的 imports
部分。
这是reactive forms guide的第一步。