Input field of type number is not showing default values (in angular)

Question

I have the following code in stock-status.component.ts file

@Component({
  selector: 'app-stock-status',
  template:`
  <input type="number" value='0' min='0' required [(ngModel)]='updatedStockValue'/>
  <button class="btn btn-primary" [style.background]='color' (click)='stockValueChanged()'>Change Stock Value</button>
    
  `,
  styleUrls: ['./stock-status.component.css']
})

As you can see in the image it is not showing the default value as 0 enter image description here

And whenever I click the Button when no data is initialized , it shows NaN which is not what I want

Any Kind of Help and Guidance would be appreciated

Barremian · Accepted Answer · 2020-07-24 13:36:41Z

1

The ngModel binding might have precedence here. You could ignore the value attribute and set updatedStockValue in it's definition.

Try the following

@Component({
  selector: 'app-stock-status',
  template:`
  <input type="number" min="0" required [(ngModel)]="updatedStockValue"/>
  <button class="btn btn-primary" [style.background]="color" (click)="stockValueChanged()">Change Stock Value</button>
    
  `,
  styleUrls: ['./stock-status.component.css']
})
export class AppComponent {
  updatedStockValue: number = 0;
  ...
}

answered Jul 24, 2020 at 13:36

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

Comments

q4pradeep · Accepted Answer · 2020-07-24 13:48:20Z

0

You can initialize a variable in the template with ng-init if you don't want to do it in the controller.

  <input type="number" min='0' required [(ngModel)]='updatedStockValue'
  ng-init="updatedStockValue=0"/>

answered Jul 24, 2020 at 13:48

q4pradeep

543 bronze badges

1 Comment

Deviprasad Sharma Over a year ago

Thanks for the answer but it doesn't seem to work and has the same bugs as that of my code @Michael's answer works great

Collectives™ on Stack Overflow

Input field of type number is not showing default values (in angular)

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