angular - 角formGroup不呈现

Question

出于某种原因，我放在 a 中的所有内容<form></form>都不会被渲染。

当我拉出表单标签之外的标签和输入字段时，它们会显示在网页上。

HMTL

text here
<form [formGroup]="blogForm" (ngSubmit)="onSubmit()">
  <label for="title">title: </label>
  <input id="title" type="text" formControlName="title">
  <label for="subText">subText: </label>
  <input id="subText" type="subText" formControlName="subText">
  <label for="blogText">blogText: </label>
  <input id="blogText" type="blogText" formControlName="blogText">
  <label for="type">blogText: </label>
  <input id="type" type="type" formControlName="type">
  <button type="submit" [disabled]="!blogForm.valid">Submit</button>
</form>
text here

TS文件

import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-create-blog',
  templateUrl: './create-blog.component.html',
  styleUrls: ['./create-blog.component.scss']
})
export class CreateBlogComponent implements OnInit {
  blogForm = new FormGroup({
    title: new FormControl('test'),
    subText: new FormControl('test'),
    blogText: new FormControl('test'),
    type: new FormControl('test')
  });

  constructor() {
  }

  ngOnInit(): void {
  }

  onSubmit() {

  }
}

应用模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {RouterModule, Routes} from '@angular/router';
import {HttpClientModule} from '@angular/common/http';
import {ReactiveFormsModule} from '@angular/forms';
import {HomePageComponent} from './core/components/homepage/HomePage.component';
import {HeaderComponent} from './core/components/header/header.component';
import {TextComponent} from './core/components/text/text.component';
import {FooterComponent} from './core/components/footer/footer.component';
import {NavbarComponent} from './core/components/navbar/navbar.component';
import {HeroComponent} from './core/components/hero/hero.component';
import {NgxUsefulSwiperModule} from 'ngx-useful-swiper';
import {FormComponent} from './core/components/form/form.component';
import {BlogTileComponent} from './core/components/blog/tile/blog-tile.component';
import {CreateBlogComponent} from './core/components/cms/create-blog/create-blog.component';

const routes: Routes = [
  {path: '', component: HomePageComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    HomePageComponent,
    HeaderComponent,
    TextComponent,
    FooterComponent,
    NavbarComponent,
    HeroComponent,
    FormComponent,
    BlogTileComponent,
    CreateBlogComponent
  ],
  imports: [
    BrowserModule,
    NgxUsefulSwiperModule,
    RouterModule.forRoot(routes),
    HttpClientModule,
    ReactiveFormsModule
  ],
  exports:
    [RouterModule],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我将它添加到另一个组件中。没什么特别的，这里的任何人都知道我在这里做错了什么愚蠢的事情。

标签： angulartypescriptformsfrontend