Just diving into Angular 11 and getting to grips with TypeScript.. I'm trying to access the 'controls' property in a specifically defined 'FormGroup' variable. But for some reason, it keeps saying that the property is undefined...
send(form: FormGroup): void{
let jsonModel = {
materialNum: form.controls['materialNum'].value,
};
let jsonModelRaw: string = JSON.stringify(jsonModel);
//...
}
https://i.sstatic.net/mKzKb.png
Here's what I have declared:
import { FormBuilder, FormControl, FormGroup, NgForm, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
HTML for the Component:
<mat-vertical-stepper [linear]="isLinear" #stepper>
<mat-step [completed]="stepOneDone" [stepControl]="newMaterialFormGroup">
<form [formGroup]="newMaterialFormGroup"
name="newMaterialForm"
#newMaterialForm="ngForm"
(ngSubmit)="send(newMaterialFormGroup.value)">
<ng-template matStepLabel>Fill out new material form</ng-template>
<mat-form-field>
<mat-label>Material #</mat-label>
<input matInput placeholder="Material ID" formControlName="MaterialNum" required>
</mat-form-field>