Angular Material forms validation error message won't go away - forms

Question

I have a material form in which I have an MdInput:
<md-form-field class="input-full-width">
<input mdInput class="form-control" type="text" placeholder="Description" formControlName="periodDesc">
<md-error *ngIf="fb.get('periodDesc').errors.required">This field is required</md-error>
</md-form-field>
The validate message appears when the field has been touched but no text has been typed in. However, the validate message persists even when I try to type in text there:
Edit 1:
The issue gets fixed when I do this instead:
<md-error *ngIf="fb.hasError('required', ['periodDesc'])">This field is required</md-error>
However, my question is why did the issue occur in the first place? Is there anything wrong with the previous case because I am using it in other places where the second one won't work. Ref: Angular Material forms validation errors

Answer 1

The reason is that When a formControl has no validator errors(see here), fb.get('periodDesc').errors will return null. So your current way will throw null error like can not find required of null.
Use fb.get('periodDesc').hasError('required') instead of fb.get('periodDesc').errors.required to prevent from above error.