Angular 11 fill input in HTML

Question

I'm facing a problem, mainly I cannot fill a value in input but in the HTML. I searched but nothing seems to work. I tried value, (value), [(value)], "k.bag.ConstructionYear", "{{k.bag.ConstructionYear}}" and other combinations and nothing seems to work.

mycomponent.html

<ng-container
  *ngIf="{
    // other stuff
    firstStepState: firstStepState$ | async
  } as o"
>
  //........
  <ng-container *ngIf="{
          bag : testService.getData(o.firstStepState.value1, o.firstStepState.value2) | async
        } as k">

    <ng-container *ngIf="k.bag !== undefined && k.bag !== null">
    {{k.bag.ConstructionYear}} // <-- this is showing 

    <input
        type="text"
        name="constructionYear"
        formControlName="constructionYear"
        id="constructionYear"
        data-test="constructionYear"
        placeholder=""
        [value]="k.bag.ConstructionYear" <-- this is the problem
    />

Andrei · Accepted Answer · 2021-04-13 15:33:33Z

1

by assigning formControlName="constructionYear" to the input, you delegate value control of this input to your formControl. from this point of time you should update the logical form from your ts code whenever you want, not the value of the input. for example through method control.setValue(newValue)

answered Apr 13, 2021 at 15:33

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gummi St · Accepted Answer · 2021-04-13 15:35:36Z

0

<input
    type="text"
    name="constructionYear"
    formControlName="constructionYear"
    id="constructionYear"
    data-test="constructionYear"
    placeholder=""
    [(ngModel)]="k.bag.ConstructionYear"
/>

for binding with your data

edited Apr 13, 2021 at 15:35

answered Apr 13, 2021 at 15:33

Gummi St

262 bronze badges

1 Comment

g0rb Over a year ago

Don't mix reactive form models with template form models. i.e. the formControlName and the ngModel attribute should not both be on the same element.

Collectives™ on Stack Overflow

Angular 11 fill input in HTML

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related