CODEWITHSUNDEEP
angular
elodie
elodie

Reputation: 109

How to change the color of the button in green if the user enters an exact value?

The user should enter 7 figures in the input, then the user enters 7 figures, the button should becomes green. I don't know if it's possible to make it in Angular?

I don't see how to transform the button in green ?

Here is my code below

<input type="text" class="inputSignInAccess" [(ngModel)]="otp" >
    <div class="error" style="color: red;">
      <div *ngIf="otp?.length > 7 ">
          You need 7 digits
      </div>
     

        <div *ngIf="otp.length != 0 && otp?.length < 7 ">
              You need 7 digits
         </div>
             
    </div>

    <div class="inputButtons ">
    <button>ok</button>
  </div>

The code is also on Stackblitz

Upvotes: 0

Views: 647

Answers (2)

Suresh Nagar
Suresh Nagar

Reputation: 1199

You can achieve this using angular forms and shouldn't be using these kind of manual checks e.g.

  component.ts
-----------
  otp: any;

  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = fb.group({
      otp: [
        '',
        [Validators.required, Validators.maxLength(7), Validators.minLength(7)]
      ]
    });
  }

  component.html
----------
<form [formGroup]="myForm">
  <input type="text" class="inputSignInAccess" formControlName="otp" >
  <div *ngIf="!myForm.get('otp').valid">
    OTP is 7 digits and mandatory
  </div>

  <div class="inputButtons">
    <button [disabled]="!myForm.valid" class="btn" [ngClass]="{valid: myForm.valid}">ok</button>
  </div>
</form>

Below is your updated stackblitz

Upvotes: 1

penleychan
penleychan

Reputation: 5470

You can use conditional in ngClass:

<div class="inputButtons" [ngClass]="{'success': otp?.length >= 7 ? true : false}">

Then on your css you can define success style:

.inputButtons.success button {
  background-color: green;
}

Upvotes: 2

Related Questions