属性“名称”类型“FormGroup”上不存在

发布于 2025-01-17 10:28:28 字数 3781 浏览 1 评论 0原文

我面临着在另一个模块中以反应性形式创建形式字段的问题。

app/post/create/create.coponent.html

<a href="#" routerLink="/post/index" class="btn btn-primary">Back</a>

<form  [formGroup]="form" (ngSubmit)="submit()">

    <div class="form-group">
        <label for="name">Name:</label>
        <input formControlName="name" id="name" type="text" class="form-control">
        <div *ngIf="form.name.touched && form.name.invalid" class="alert alert-danger">
            <div *ngIf="form.name.errors?.required">Title is required.</div>
        </div>
    </div>


    <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>
</form>

` app/post/post/create/create.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup,FormControl,Validators,FormBuilder } from '@angular/forms';
import { Router } from '@angular/router';
import { PostService } from '../post.service';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {

  form!:FormGroup;

  constructor(public postService:PostService,private router:Router,private formBuilder:FormBuilder) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      name: new FormControl('',[Validators.required]),
      age: new FormControl('',[Validators.required]),
      department: new FormControl('',[Validators.required]),
      blood_group: new FormControl('',[Validators.required]),
      address: new FormControl('',[Validators.required]),
      contact: new FormControl('',[Validators.required]),
      id: new FormControl('',[Validators.required])
    })
  }

  get f(){
    return this.form.controls;
  }

  submit(){
    this.postService.create(this.form.value).subscribe(res=>{
      console.log('Post created successfully');
      this.router.navigateByUrl('post/index');
    })
  }

}

post/post.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PostRoutingModule } from './post-routing.module';
import { IndexComponent } from './index/index.component';
import { ViewComponent } from './view/view.component';
import { CreateComponent } from './create/create.component';
import { EditComponent } from './edit/edit.component';
import { PostService } from './post.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    IndexComponent,
    ViewComponent,
    CreateComponent,
    EditComponent
  ],
  imports: [
    CommonModule,
    PostRoutingModule,
    ReactiveFormsModule,
    FormsModule
  ],
  exports:[
    IndexComponent,
    ViewComponent,
    CreateComponent,
    EditComponent
  ],
  providers:[PostService]
})
export class PostModule { }

app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PostModule } from './post/post.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PostModule,
    HttpClientModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我在到处都是导入数组,我在FormBuilder中提到的属性仍然没有反映在HTML组件中,并且正在抛出错误。

I am facing the issue in creating form fields in reactive forms in another module.

app/post/create/create.coponent.html

<a href="#" routerLink="/post/index" class="btn btn-primary">Back</a>

<form  [formGroup]="form" (ngSubmit)="submit()">

    <div class="form-group">
        <label for="name">Name:</label>
        <input formControlName="name" id="name" type="text" class="form-control">
        <div *ngIf="form.name.touched && form.name.invalid" class="alert alert-danger">
            <div *ngIf="form.name.errors?.required">Title is required.</div>
        </div>
    </div>


    <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>
</form>

`
app/post/create/create.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup,FormControl,Validators,FormBuilder } from '@angular/forms';
import { Router } from '@angular/router';
import { PostService } from '../post.service';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {

  form!:FormGroup;

  constructor(public postService:PostService,private router:Router,private formBuilder:FormBuilder) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      name: new FormControl('',[Validators.required]),
      age: new FormControl('',[Validators.required]),
      department: new FormControl('',[Validators.required]),
      blood_group: new FormControl('',[Validators.required]),
      address: new FormControl('',[Validators.required]),
      contact: new FormControl('',[Validators.required]),
      id: new FormControl('',[Validators.required])
    })
  }

  get f(){
    return this.form.controls;
  }

  submit(){
    this.postService.create(this.form.value).subscribe(res=>{
      console.log('Post created successfully');
      this.router.navigateByUrl('post/index');
    })
  }

}

post/post.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PostRoutingModule } from './post-routing.module';
import { IndexComponent } from './index/index.component';
import { ViewComponent } from './view/view.component';
import { CreateComponent } from './create/create.component';
import { EditComponent } from './edit/edit.component';
import { PostService } from './post.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    IndexComponent,
    ViewComponent,
    CreateComponent,
    EditComponent
  ],
  imports: [
    CommonModule,
    PostRoutingModule,
    ReactiveFormsModule,
    FormsModule
  ],
  exports:[
    IndexComponent,
    ViewComponent,
    CreateComponent,
    EditComponent
  ],
  providers:[PostService]
})
export class PostModule { }

app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PostModule } from './post/post.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PostModule,
    HttpClientModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I have added the ReactiveFormsModule in imports array everywhere, still the property that I have mentioned in the formBuilder is not reflected in the html component and is throwing an error.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文