CODEWITHSUNDEEP
angularangular-reactive-formsangular-forms
Joe Spalding
Joe Spalding

Reputation: 29

Inputs not binding to FormControls with the same FormControlName

Currently, I am facing an issue where the template is not binding to the formcontrols that share the name, removing conditional logic for sanity checks.

What I've tried: Spellchecking, different FormControl constructor calls, removing conditional logic for sanity checks.

TypeScript File:


  @Input() repairForm: FormGroup;
  .
  .
  .
  ngOnInit() {
    this.isAuthorized = this.authService.isAuthorized;

    if(this.isAuthorized){
      this.repairForm.addControl('customerNumber', new FormControl('',))
      this.repairForm.addControl('originDate', new FormControl('',))
      this.repairForm.addControl('originTime', new FormControl('',))
      this.repairForm.addControl('originCity', new FormControl('Value Here',))
      this.repairForm.addControl('originState', new FormControl('',))
    }
    // other form code goes here
  }

Template File:

<form [formGroup]="repairForm">
  .
  .
  .
  <div *ngIf="isAuthorized ">
    <div class="form-row">
      <mat-form-field>
        <input matInput formContolName="customerNumber" placeholder="Customer Number">
      </mat-form-field>
    </div>
    <div class="form-row">
      <mat-form-field>
        <input matInput formContolName="originCity" placeholder="Origin City">
      </mat-form-field>
      <mat-form-field>
        <input matInput formContolName="originState" placeholder="Origin State">
      </mat-form-field>
    </div>
    <div class="form-row">
      <mat-form-field >
        <input matInput [matDatepicker]="picker" formContolName="originDate" placeholder="Origin Date" (dateChange)="logEvent()">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
      <mat-form-field>
        <input matInput formContolName="originTime" placeholder="Origin Time">
      </mat-form-field>
    </div>
  </div>
  .
  .
  .
</form>

On loading the form, the input associated with originCity does not display 'Value Here'. Changes to the inputs do not change the formControls they are supposed to be associated with. Additionally, the log event from the datepicker dateChange event logs the status of the repair form. After changing any of these fields, the form will be pristine and untouched. Finally, there are other fields created under similar circumstances which work.

Upvotes: 0

Views: 1774

Answers (1)

Joe Spalding
Joe Spalding

Reputation: 29

Update, found the issue. Made a typo in 'formControlName' and only typed 'formContolName'

Upvotes: 2

Related Questions