0

我想在上传图片的组件中使用表单，但我只能在app.component.html.

在我的app.module.ts我有

import { ReactiveFormsModule } from '@angular/forms';

imports: [
    ReactiveFormsModule,

在我的app.component.ts我有：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

rForm: FormGroup;
post:any;                     // A property for our submitted form
description:string = '';
name:string = '';

constructor (
    private fb: FormBuilder) {
    console.log('AppComponent constructor');
    this.rForm = fb.group({
        'name' : [null, Validators.required],
        'description' : [null, Validators.compose([Validators.required, Validators.minLength(30), Validators.maxLength(500)])],
        'validate' : ''
    });

}

最后在我的app.component.html我有这个：

<form [formGroup]="rForm" (ngSubmit)="addPost(rForm.value)">
   <div class="form-container">
     <div class="row columns">
       <h1>My Reactive Form</h1>
       <label>Name
         <input type="text" formControlName="name">
       </label>

       <label>Description
         <textarea  formControlName="description"></textarea>
       </label>

       <label for="validate">Minimum of 3 Characters</label>
       <input type="checkbox" name="validate" formControlName="validate" value="1"> On

       <input type="submit" class="button expanded" value="Submit Form" [disabled]="!rForm.valid">
     </div>
   </div>

当我编译这个时，我可以毫无问题地看到表单。

但是当我尝试在不同的组件中创建表单时，例如上传，/upload/upload.component.html我得到一个错误：

未捕获的错误：模板解析错误：无法绑定到“formGroup”，因为它不是“form”的已知属性。

所以看起来 app.module.ts 的导入语句没有被识别/upload/upload.component.ts

有想法该怎么解决这个吗？

4

0 回答 0