Form directives

Abstractly describing input is all well and good, but at some point we will need to connect it to the UI.

@angular/forms provides two modules that do that: FormsModule and ReactiveFormsModule.

ReactiveFormsModule

 

ReactiveFormsModule is simpler to understand and explain than FormsModule. That's why I will cover it first.

@Component({
selector: 'filters-cmp',
template: `
    <div [formGroup]="filters">
      <input formControlName="title" placeholder="Title">
      <input formControlName="speaker" placeholder="Speaker">
      <input type="checkbox" formControlName="highRating">
      High Rating
    </div>
  `
})
export class FiltersCmp {
  filters = new FormGroup({
    speaker: new FormControl(),
    title: new FormControl(),
    highRating: new FormControl(false),
  });

  constructor(app: App) {
    this.filters.valueChanges.debounceTime(200).\
    subscribe((value) => {
      app.applyFilters(value);
    });
  }
}

@NgModule({
  imports: [...