Using Angular Forms instead of ngModel

Question

I have following Code with ngModel, which is working. HTML:

<div class="container">
  <div class="search-name">
      <input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="on" placeholder=" SEARCH  ">
  </div>
  <ul *ngFor="let name of names | filter:searchText">
      <li>
          <span>{{name.country}}</span>
      </li>
  </ul>
</div>

TypeScript:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'search-filter-angular';
  searchText: any;
  names = [
    { country: 'Adil'},
    { country: 'John'},
    { country: 'Jinku'},
    { country: 'Steve'},
    { country: 'Sam'},
    { country: 'Zeed'},
    { country: 'Abraham'},
    { country: 'Heldon'}
];
}

How can I write this code with angular forms? I read there is also a two way data binding.

Can please someone help?

Answer 1

You can just use the following code:

HTML:

<div class="container">
  <div class="search-name">
      <input class="form-control" type="text" name="search" [formControl]="searchText" autocomplete="on" placeholder=" SEARCH  ">
  </div>
  <ul *ngFor="let name of names | filter: (searchText.valueChanges | async)">
      <li>
          <span>{{name.country}}</span>
      </li>
  </ul>
</div>

TS:

title = 'search-filter-angular';
  searchText = new FormControl();
  names = [
    { country: 'Adil' },
    { country: 'John' },
    { country: 'Jinku' },
    { country: 'Steve' },
    { country: 'Sam' },
    { country: 'Zeed' },
    { country: 'Abraham' },
    { country: 'Heldon' },
  ];

Please remember to import ReactiveFormsModule in your module.