Using reactive forms in a nice simple manner

form-item-change.model.ts

export class FormItemChange {
  value: any;
  isValid: boolean;

  constructor(model: any) {
    const { value, isValid } = model;
    this.value = value;
    this.isValid = isValid;
  }
}

parent.component.tml

 <div *ngIf="selectedField" [ngSwitch]="selectedField.type">
  <app-search-type-text [formValue]="criteriaValue" (valueChanged)="onValueChanged($event)" *ngSwitchCase="'text'"></app-search-type-text>
  <button mat-raised-button [disabled]="!isValid" (click)="saveCriteria()">Add Criteria</button>
 </div>

parent.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { NativeDateAdapter, DateAdapter } from '@angular/material';

import { SearchCriteriaService } from 'app/search/main/search-panel/search-criteria.service';
import { SearchCriteriaDataService } from 'app/search/main/search-panel/search-criteria-data.service';

import { SearchCriteria } from 'app/search/models/search-criteria.model';
import { SearchField } from 'app/search/models/search-fiields.model';
import { FormItemChange } from 'app/search/models/form-item-change.model';

@Component({
  selector: 'app-search-panel',
  templateUrl: './search-panel.component.html',
  styleUrls: ['./search-panel.component.scss']
})
export class SearchPanelComponent implements OnInit, OnDestroy {
  criteriaValue: string;
  isValid = false;

  private _isActive = true;

 

  ngOnDestroy() {
    this._isActive = false;
  }

  onValueChanged(change: FormItemChange) {
    this.criteriaValue = change.value;
    this.isValid = change.isValid;
    console.log(change);
  }

}

SearchType.component,html

<div [formGroup]="searchTermFormGroup">
  <mat-form-field>
    <input matInput formControlName="searchValueControl">
    <mat-error>
     Search term
      <strong>required</strong>
    </mat-error>
  </mat-form-field>

</div>

SearchType.component,ts

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormBuilder, FormControl } from '@angular/forms';
import { Validators } from '@angular/forms';
import { FormItemChange } from 'app/search/models/form-item-change.model';

@Component({
  selector: 'app-search-type-text',
  templateUrl: './search-type-text.component.html',
  styleUrls: ['./search-type-text.component.scss']
})
export class SearchTypeTextComponent implements OnInit {
  @Input() formValue;
  searchTermFormGroup: FormGroup;
  @Output() valueChanged = new EventEmitter();

  constructor() { }

  ngOnInit() {
    this.searchTermFormGroup = new FormGroup({
      searchValueControl: new FormControl(this.formValue, [Validators.required])
    });

    this.searchTermFormGroup.valueChanges
      .subscribe((change) => {
        this.valueChanged.emit(new FormItemChange({
          value: change.searchValueControl,
          isValid: this.searchTermFormGroup.valid
        }));
      });
  }

}