I need help resolving a common error I'm encountering. I have forms in two different sections of my application, and while the form functions correctly in one section, it is not working in the other. Both ReactiveFormsModule and FormsModule are imported.
resolution.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ResolutionRoutingModule } from './resolution-routing.module';
import { ResolutionComponent } from './resolution/resolution.component';
import { ResolutionDetailComponent } from './resolution-detail/resolution-detail.component';
import { ResolutionListComponent } from './resolution-list/resolution-list.component';
import { NewResolutionComponent } from '../../forms/new-resolution/new-resolution.component';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatDialogModule } from '@angular/material/dialog';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatCardModule } from '@angular/material/card';
import { ResolutionEditComponent } from '../../forms/resolution-edit/resolution-edit.component';
@NgModule({
declarations: [ResolutionComponent,
ResolutionDetailComponent,
ResolutionListComponent,
NewResolutionComponent,
ResolutionEditComponent],
imports: [
CommonModule,
ResolutionRoutingModule,
MatFormFieldModule,
ReactiveFormsModule,
MatDialogModule,
FormsModule,
MatInputModule,
MatSelectModule,
MatCardModule
]
})
export class ResolutionModule { }
The form in the NewResolutionComponent works without errors.
new-resolution-component.html(snippet: showing one input field)
<form (ngSubmit)='onSubmit()'[formGroup]='ResolutionFormGroup'>
<mat-form-field>
<mat-label>Title</mat-label>
<input [formControl]='TitleControl' matInput placeholder="Title" required/>
</mat-form-field>
...
</form>
new-resolution.component.ts
import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
import { AuthService } from '../../shared/services/auth.service';
import { ResolutionsService } from '../../shared/services/resolutions.service';
@Component({
selector: 'app-new-resolution',
templateUrl: './new-resolution.component.html',
styleUrls: ['./new-resolution.component.scss']
})
export class NewResolutionComponent implements OnInit {
uid: string
category_id: string
title: string
description: string
catId: string
categoryList = []
TitleControl: AbstractControl
DescriptionControl: AbstractControl
UserIdControl: AbstractControl
CategoryControl: AbstractControl
ResolutionFormGroup: FormGroup
...
In contrast, when replicating the form setup in another file like resolution-edit.component.html,
I encountered an issue with the placeholder text not displaying as expected:
resolution-edit.component.html(showing one input, similar to previous component)
<form formGroup='ResEditGroup'>
<mat-form-field>
<mat-label>Title</mat-label>
<input [FormControl]='TitleControl' matInput placeholder="Title" required/>
</mat-form-field>
After analyzing the components, I noticed that using '[ ]' around 'FormControl' caused an error message:
Can't bind to 'FormControl' since it isn't a known property of 'input'.resolution-edit.component.ts
import { Component, Inject, OnInit } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-resolution-edit',
templateUrl: './resolution-edit.component.html',
styleUrls: ['./resolution-edit.component.scss']
})
export class ResolutionEditComponent implements OnInit {
...
To ensure consistency with the first component's behavior, make sure to only use 'formControl' instead of '[formControl]' to display the desired placeholder text ('SUPERBAD'), as demonstrated in the initial form setup.