Question

我想在上传图片的组件中使用表单，但我只能在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，我收到错误：

未捕获错误：模板解析错误：无法绑定到＆＃39; formGroup＆＃39;因为它不是“形式”的已知属性。

所以看起来app.module.ts的import语句不会被/upload/upload.component.ts

识别

有关如何解决此问题的任何想法？

Angular表单仅适用于app.component.html

0 个答案: