Form Field Component

form-field-input.component.html

<div [formGroup]='formGroup'>
    <label [attr.for]='field.key'>{{field.title}}:</label>
    <div [ngSwitch]="field.type" class='field-group'>
        <div *ngSwitchCase="'text'">
            <input type='text' [formControlName]="field.key" [id]='field.key' />
        </div>

        <div class='error-message' *ngIf='!isValid' role="alert">{{field.title}} is required</div>
    </div>
</div>

form-field-input.component.ts

export class FormFieldInputComponent implements OnInit {
  @Input() field: ContactFormField
  @Input() formGroup: FormGroup;
  
  constructor() { }

  ngOnInit(): void {
  }

  get isValid() {
    return this.formGroup.controls[this.field.key].valid || this.formGroup.controls[this.field.key].untouched;
  }

}