CODEWITHSUNDEEP
angulartypescript
vertika
vertika

Reputation: 1424

Button is not disabled at the initialization of page ,but gets disabled once you click it

I made a very simple page , with an input field and a button. I have to make button disabled when input field is empty . Once user clicks on it then input field will be cleared or reset . My button is disabled once I click it. But its not disabled from the start. My code is :

HMTL

<input type= 'text' [(ngModel)]="userName">

{{userName}}

<button[disabled]="userName==''(click)='resetUsername()'>RestUsername</button>

Typescript:

import {Component} from '@angular/core';

@Component({
    selector : 'app-server',
    templateUrl :'./server.component.html'               
})
export class Servercl {
   username=''

  resetUsername = function(){
       this.userName='';
   }         
}

Please tell where i am going wrong. Angular 4 is new to me. I am making userName empty from the start . Dont understand what the problem is . Am i missing something?

Upvotes: 2

Views: 87

Answers (1)

Suren Srapyan
Suren Srapyan

Reputation: 68685

Your variable name's parts are all in the lowercase: username. But your attached variable to the input and button is with name userName. So

username !== userName
-----------------^--

Try to make them the same. Also you have some error in the button template.

<button[disabled]="username === ''" (click)='resetUsername()'>RestUsername</button>

Upvotes: 3

Related Questions