验证Angular表单时显示消息时出现错误

Question

我正在创建一个Angular表单，并且在验证时，我试图在未填充字段时显示消息，因此我在span标签中使用了ng-for，但出现错误

html->

<div class="form-group">
    <input type="text" formControlName='fname' placeholder="First Name">
    <span *ngFor="signupForm.control['fname'].haserror(required)"> Enter your Name </span>
</div>

错误-

Can't bind to 'ngFor' since it isn't a known property of 'span'. ("m-group">
       <input type="text" formControlName='fname'  placeholder="First Name">
       <span [ERROR ->]*ngFor="signupForm.control['fname'].haserror(required)"> Enter your Name </span>
      </div>  

Answer 1

使用*ngIf代替*ngFor

Stackblitz Demo

<span *ngIf="signupForm.get('fname').hasError('required')"> Enter your Name </span>