Angular HTML Forms - value attribute not working in input field

Question

I have a template-driven form in MyFormComponent template

<div class="container" *ngIf="employee">
<h3>Employee {{employee.lastname}}</h3>
<form #f="ngForm" (ngSubmit)="submit(f)">
    <div class="form-group">
        <label for="firstname">Name </label><br>
        <input type="text" class="form-control" name="firstname" ngModel value="{{employee.firstname}}" >
    </div>
    <button class="btn" type="submit">Update Employee Name</button>
</form>

The goal of the form is to update the name of a given employee.\

And the .ts file

import { Component, OnInit } from '@angular/core';
import { Employee } from '../employee';
import { NgForm } from '@angular/forms'
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-myform',
  templateUrl: './myform.component.html',
  styleUrls: ['./myform.component.css']
})
export class MyFormComponent implements OnInit {
  public myvar = "hi";
    constructor() {}

employee?: Employee;

ngOnInit(): void {
    this.getEmployee();
}

submit(f: any){
  //Everything here works correctly. I do get the form object
}

getEmployee(): void {
  //Everything here works correctly
}
}

My problem is that the 'value' field is not showing in the app. It's blank/empty.
If instead of 'value' I use 'placeholder', it works. But I want it to be a default value there, so that the user doesn't have to type in if he does not want to change it.
If instead of {{employee.firstname}} I use 'myvar' which I declare public in the .ts file, it also does not show.

FormsModule is imported in root module.
@angular/cli 14.0.2. Mozilla/Chrome

Yes, doing so throws the error 'Parser Error: got interpolation ( {{ }} ) where expression was expected. What's the difference between value and [value]? Doing [value]=mivar1 does not work, which shows the problem is somewhere else — Mauro Oyhanart
– Mauro Oyhanart, Commented Jun 27, 2022 at 15:17
It seems that your "employee" variable isn't initialized. Can you try something like employee?: Employee = { firstname: 'Roger' } and see what happens? — ProgBlogger
– ProgBlogger, Commented Jun 27, 2022 at 15:41
I don't think that's the case, because the <h3> tag works correctly. — Mauro Oyhanart
– Mauro Oyhanart, Commented Jun 27, 2022 at 15:45

Piyush Jain · Accepted Answer · 2022-06-27 15:39:50Z

2

You can try with given 2 approach.

1.

<form #f="ngForm" (ngSubmit)="submit(f)">
  <div class="form-group">
    <label for="firstname">Name </label><br />
    <input
      type="text"
      class="form-control"
      name="firstname"
      [(ngModel)]="employee.firstname"
    />
  </div>
  <button class="btn" type="submit">Update Employee Name</button>
</form>

<form #f="ngForm" (ngSubmit)="submit(f)">
  <div class="form-group">
    <label for="firstname">Name </label><br />
    <input
      type="text"
      class="form-control"
      name="firstname"
      [value]="employee.firstname"
    />
  </div>
  <button class="btn" type="submit">Update Employee Name</button>
</form>

Working Demo

answered Jun 27, 2022 at 15:39

Piyush Jain

1,9863 gold badges22 silver badges40 bronze badges

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

Comments

Mahdi Rezazadeh · Accepted Answer · 2022-06-27 15:32:00Z

2

My suggestion is delete *ngIf="employee" in the top level div and use value="{{employee?.firstname}}" instead.

So:

<div class="container">
  <h3>Employee {{employee?.lastname}}</h3>
  <form #f="ngForm" (ngSubmit)="submit(f)">
      <div class="form-group">
          <label for="firstname">Name </label><br>
          <input type="text" class="form-control" name="firstname" ngModel value="{{employee?.firstname}}" >
      </div>
      <button class="btn" type="submit">Update Employee Name</button>
  </form>
 .
 .

answered Jun 27, 2022 at 15:32

Mahdi Rezazadeh

5363 silver badges10 bronze badges

4 Comments

Mauro Oyhanart Over a year ago

That works, thank you! Could you please explain what's happening, why 'value' field does not work inside *ngIf ?

Mahdi Rezazadeh Over a year ago

It relates to the detection strategy and zone.js, you should avoid when you are using ngIf and have some Id or any form type in inner content. instead of ngIf you can use [hidden]="condition". for more detail see this link

Mauro Oyhanart Over a year ago

Here's the answer to the why angular.io/guide/architecture-components#data-binding

HAA Jan 11 at 13:03

This doesn’t help if the *ngIf is used to hide or show different controls based on a logic condition that is distinct from the data being bound, i.e., some other “flag” driving the display of the components showing employee.firstname in the input value property. This seems like a bug in angular due to the *ngIf or a @if block and there should be a fix or some other solution.

Collectives™ on Stack Overflow

Angular HTML Forms - value attribute not working in input field

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related