angular - Reactive Forms でエラーの原因となっているカスタム検証関数を特定する方法

Question

formControlName を firstName として formControl に割り当てられたバリデーターの数があります。適切なメッセージを表示できるように、どの検証でエラーが発生しているかを知る方法

以下は、必須のカスタムメイドの検証関数です

export function required() {
  return function(control:FormControl)
  {
    var value: string = control.value;
    value = value.trim();
    if(value.length == 0)
      return {required:true};    
    return null;
  } 
 }

そして使用はこのようなものです

<md-error [hidden]="!firstName.errors.required || (!firstName.touched && !submitted)">
   Name is required
</md-error>

次のエラーが表示されます

ERROR TypeError: Cannot read property 'required' of null