属性“名称”类型“FormGroup”上不存在
我面临着在另一个模块中以反应性形式创建形式字段的问题。
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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论