Whenever I submit the form and try to go back, an error pops up saying "ERROR Error: Cannot find control with the name: 'name'".
I'm not sure what I might be missing. Do I need to include additional checks?
Below is my HTML file:
<div class="col-xs-12">
<form [formGroup]="sectionForm" novalidate class="form">
<div class="col-xs-12">
<div class="col-sm-6">
<fieldset class="form-group">
<label>
Section Name
</label>
<input type="text" formControlName="name" class="form-control">
<div class="invalid-feedback" *ngIf="sectionForm.controls['name']?.errors && submitted">
<span *ngIf="sectionForm.controls['name']?.errors.required">
Section name is required.
</span>
</div>
</fieldset>
<fieldset class="form-group" *ngIf="!subject">
<label>
Choose a Subject
</label>
<select class="custom-select" placeholder="Select Subject" formControlName="subjectId" >
<option *ngFor="let subject of subjects" [value]="subject._id">{{ subject?.name }}</option>
</select>
<div class="invalid-feedback" *ngIf="sectionForm.controls['subjectId'].errors && submitted">
<span *ngIf="sectionForm.controls['subjectId'].errors.required">
Subject is required.
</span>
</div>
</fieldset>
<button class="btn btn-primary" type="submit" (click)="create()">Submit</button>
</div>
</div>
</form>
</div>
This is my Typescript file:
export class SectionsCreateComponent implements OnInit {
program;
submitted;
test;
section;
sectionForm: FormGroup =new FormGroup({});
isBusy;
chapter;
subject;
subjects = [];
ngOnInit() {
if (!this.program) {
this.router.navigate(['program']);
} else {
this.refresh();
}
}
refresh() {
this.getSubjects();
let testId=this.activatedRoute.snapshot.params['testId'];
if (this.section) {
this.sectionForm = this.fb.group({
'name': [this.section.name, Validators.compose([Validators.required])],
'testId': [testId, Validators.compose([Validators.required])],
'subjectId': [this.section.subjectId, Validators.compose([Validators.required])]
});
} else {
this.sectionForm = this.fb.group({
'name': ['', Validators.compose([Validators.required])],
'testId': [testId, Validators.compose([Validators.required])],
'subjectId': [this.subject ? this.subject._id : '', Validators.compose([Validators.required])]
});
}
}
getSubjects() {
this.subjectService.list(this.program).subscribe(
data => this.subjects = data.data
);
}
create() {
this.submitted = true;
if (!this.sectionForm.valid) {
return;
}
let testId=this.activatedRoute.snapshot.params['testId'];
let programId=this.program;
this.isBusy = true;
if (this.section && this.section._id) {
const reqObject = {
...this.sectionForm.value
};
reqObject._id = this.section._id;
this.testsService.updateSection(reqObject).subscribe(
data => {
this.alertService.showSuccess('Success', 'Program updated successfully');
this.dataService.setInterComponentsData({subject: this.subject, program: this.program, chapter: this.chapter, test: this.test});
this.router.navigate([`tests/${testId}/${programId}/sections/list`]);
}
);
} else {
this.testsService.createSection(this.sectionForm.value).subscribe(
data ...
I've also attempted:
'name': [this.section this.section.name ? this.section.name : '', Validators.compose([Validators.required])],
But I'm still encountering errors. If there's something I'm overlooking, any help would be appreciated.