Binding with FormControlName in angular

Question

I'm trying to bind my data using formbuilder (formControlName)

Well it is working correctly when adding data but the datepicker is empty when reading or trying to update the data. This is my html code

 <div class="form-group">
            <label for="picker2" class="control-label">{{'DateOfExpense' | translate}}</label>
            <div class="input-group">
              <input class="form-control" [matDatepicker]="picker" readonly
                placeholder="{{'DateOfExpense' | translate}}"  
                formControlName="DateOfExpense" >
              <mat-datepicker-toggle matSuffix [for]="picker"  ></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
              <mat-error *ngIf="submitted && f.DateOfExpense.errors!=null">
                  <div *ngFor="let error of getErrors(f.DateOfExpense)">
                      - {{ error | translate}}
                  </div>
              </mat-error>
            </div>
          </div>

Could you make a minimal stackblitz to look at? – chrismclarke Aug 30 '19 at 15:07 — chrismclarke, Aug 30 '19 at 15:07

score 0 · Answer 1 · answered Aug 30 '19 at 14:09

0

Did you wrap the form elements(input etc) in form tag and gave it a formGroup? You might want to go through the docs once

answered Aug 30 '19 at 14:09

Tony

152
2
15

score 0 · Answer 2 · answered Aug 30 '19 at 15:28

If you use formControlName in HTML temple then it should be under corresponding FormGroup instance of your angular component, only then value of input field will bind to the component data.

Hope below link Will help you to understand the usage of formControlName. https://stackoverflow.com/a/40172009/1430266

Binding with FormControlName in angular

2 Answers2