CODEWITHSUNDEEP
angular
Rajesh
Rajesh

Reputation: 1

Enabling button on user enter's text Angular 7

Here I am using reactive forms for data binding.I am facing some problem in disabling and enabling button.

Actually, I am setting some value to the text field initially.

Now I want that update button should be disabled untill user enter something. Its like update a row in a table.

  this.firstName= "Angular"
    this.newform = this.fb.group({
        FirstName: [this.firstName, [Validators.required, Validators.minLength(1)]],
    });



<form [formGroup]="newform" >
        <mat-form-field appearance="outline" fxFlex="100%">
               <mat-label>Name</mat-label>
                 <input matInput placeholder="" formControlName="FirstName" type="text" required>
        </mat-form-field>
       <button class="btn" (click)= "onSubmit()" mat-raised-button color="primary" [disabled]="!FirstName" >Update</button>
</form>

Upvotes: 0

Views: 201

Answers (1)

Antonis
Antonis

Reputation: 557

You can create a getter in your component

get hasFirstName():boolean {    
  return !!this.newform.get('dataSource').value
}

and the then on your template, add on the disabled input of your button:

[disabled]='!hasFirstName'

hope it helps

Upvotes: 1

Related Questions