Reputation: 1424
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
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