0

I am implementing an input type search in Reactive forms. I want to change the color of a formfield or label when the value is matched with the search input value. How can i achieve this please guide me.

HTML

<form
[formGroup]="form">
<h3>Group Filter</h3>
<div class="row">
    <div class="col-md-3">
    <label> FirstNAme:
        <input type="text"
        formControlName="firstName"
        class="form-control"
        placeholder="First Name"
        /></label>
    </div>
    <div class="col-md-3">
<label> LastName:
        <input type="text"
        formControlName="lastName"
        class="form-control"
        placeholder="Last Name"
        />
</label>
    </div>
    <div class="col-md-3">
<label> Job Title:
        <input type="text"
        formControlName="Job Title"
        class="form-control"
        placeholder="Job Title"
        />
</label>
    </div>
    <div class="col-md-3 col-sm-3">
        <select class="form-control"
        formControlName="gender">
            <option value="">Gender</option>
            <option value="M">male</option>
            <option value="F">female</option>
        </select>
    </div>
    <div class="col-md-3">
<label> AGE_FROM:
        <input type="text"
        formControlName="agefrom"
        class="form-control"
        placeholder="age from"
        />
</label>
    </div>
    <div class="col-md-3">
        <input type="text"
        formControlName="ageto"
        class="form-control"
        placeholder="age to"
        />
    </div>

    <div>
                <input type='search'  [(ngModel)]='searchTerm' [ngModelOptions]="{standalone: true}"
                      placeholder="search">
              </div>
</div>

If i search for the value "FIRSTNAME" i want to highlight or change the color of the label with value FIRSTNAME. I want to implement for all the values. what is the better way to do it.

rja
  • 169
  • 2
  • 14
  • Use conditional class name (or style), that compares actual value with value in searchTerm. https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass – Kudlas Jul 09 '20 at 10:55
  • Thanks for the Reply. But how can i apply regex to the search value in HTML and i think it will be complicated to check each form field and apply style to it. – rja Jul 09 '20 at 11:08
  • You can do all the logic in component's class, and for example create boolean variable, which says if the input should change color or not. This variable can be used (bound) in HTML template to append class or not. – Kudlas Jul 09 '20 at 11:18
  • I am a bit confuse. It wil be great. if you can provide a short example. Thanks. – rja Jul 09 '20 at 11:23
  • can you make minimal working code sample on for example codesandbox? – Kudlas Jul 10 '20 at 10:25

0 Answers0