Angular 7 Form Example

1import { Component, OnInit, Output, EventEmitter } from '@angular/core';
2import { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
3import { ReactiveFormsModule, FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
4
5import { ApiService } from '../api.service';
6
7@Component({
8  selector: 'app-filter-tasks',
9  templateUrl: './filter-tasks.component.html',
10  styleUrls: ['./filter-tasks.component.css']
11})
12export class FilterTasksComponent implements OnInit {
13  @Output() changed: EventEmitter<string> = new EventEmitter<string>();
14
15  // Form Controls
16  // ------------------------------------------------------------
17  public form: FormGroup;
18  public task = new FormControl('', Validators.required);
19  constructor(private apiService: ApiService,
20    private fb: FormBuilder) {
21      this.form = fb.group({
22        task: this.task
23      });
24      this.subscribeToForm();
25    }
26
27  ngOnInit() {
28
29  }
30
31  subscribeToForm() {
32    this.form.valueChanges
33      .pipe(
34        debounceTime(400),
35        distinctUntilChanged(),
36        filter((data) => this.form.valid)
37      )
38      .subscribe(data => {
39        console.log(data);
40      });
41  }
42}
43
44
45/* TEMPLATE
46<div class="card">
47  <div class="card-content">
48    <span class="card-title">Search / Filter</span>
49    <form class="row" [formGroup]="form">
50        <div class="input-field col s12">
51          <input placeholder="my task name" type="text" class="validate" formControlName="task">
52          <label for="name" class="active">Task</label>
53        </div>
54    </form>
55  </div>
56</div>
57*/
58
59
60