Make directive @Input required

Question

In AngularJs we could make a directive attribute required. How do we do that in Angular with @Input? The docs don\'t mention it.

Eg.

@Component({
  selec         


        

Answer 1

Why not use the @angular/forms library to validate your @Inputs? The following solution:

• Fails fast (not just when the @input value is accessed by the component for the first time)
• Allows re-using rules that you've already used for your Angular forms

---

Usage:

    export class MyComponent {

      @Input() propOne: string;
      @Input() propTwo: string;

      ngOnInit() {
        validateProps(this, {
          propOne: [Validators.required, Validators.pattern('[a-zA-Z ]*')],
          propTwo: [Validators.required, Validators.minLength(5), myCustomRule()]
        })
      }
    }

Utility function:

    import { FormArray, FormBuilder, ValidatorFn, FormControl } from '@angular/forms';

    export function validateProps(cmp: T, ruleset: {[key in keyof T]?: ValidatorFn[]} ) {
      const toGroup = {};
      Object.keys(ruleset)
        .forEach(key => toGroup[key] = new FormControl(cmp[key], ruleset[key]));
      const formGroup = new FormBuilder().group(toGroup);
      formGroup.updateValueAndValidity();
      const validationResult = {};
      Object.keys(formGroup.controls)
        .filter(key => formGroup.controls[key].errors)
        .forEach(key => validationResult[key] = formGroup.controls[key].errors);
      if (Object.keys(validationResult).length) {
        throw new Error(`Input validation failed:\n ${JSON.stringify(validationResult, null, 2)}`);
      }
    }

Stackblitz