Angular 12 mat-dialog form group values empty-CodePudding

I am using angular material with form and for some reason I can't get the values of a simple form. When I am on the debbuger line the values are empty. Thank you in advance for the help

 <form [formGroup]="addNewDeductionForm">
   <mat-dialog-content fxLayoutGap="2%">
     <mat-form-field >
      <mat-label>Starting balance</mat-label>
      <input formControName="startingBalance">
     </mat-form-field>
   </mat-dialog-content>
   <mat-dialog-actions align="end">
    <button mat-raised-button mat-dialog-close (click)="AddDeduction()">Add Deduction</button>
   </mat-dialog-actions>
</form>

import { Component, Inject, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-dialog-deductions',
  templateUrl: './dialog-deductions.component.html',
  styleUrls: ['./dialog-deductions.component.scss']
})

export class DialogDeductionsComponent implements OnInit {

  addNewDeductionForm!: FormGroup;
  constructor( private fb: FormBuilder) {  }

  ngOnInit(){
    this.addNewDeductionForm = this.fb.group({
    startingBalance: ''
  })
}

AddDeduction(){
  console.log(this.addNewDeductionForm.value);
  debugger
}

}

CodePudding user response：

You have a typo in your template

<input formControName="startingBalance">

Note how it's spelled formControName rather than formControlName. The correct syntax is

<input formControlName="startingBalance" type="text">