TextBoxが無効な場合はボタンを隠す

Question

メールボックスのパターンがあるテキストボックスがあり、パターンが失敗した場合は（クリック）でスパンを非表示にします。ここに私が持っているものは、私は仕事が必要と思うものです

<input type="text" placeholder="Signup for Mailing List" #userEmail="ngModel" style="width:300px" name="email" [(ngModel)]="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" required email> 
    <span (click)="signup()" class="fa fa-envelope-o" *ngIf="userEmail.touched && !userEmail?.valid" style="position: relative;z-index: 1;cursor:pointer;left: -35px;width: 0; color:gray"></span> 

これは間違っていますか？ボタンは決して表示されません

Answer 1

<input type="text" placeholder="Signup for Mailing List" 
     #userEmail="ngModel" style="width:300px" 
     name="emails" [(ngModel)]="emails" 
     pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" required email> 
<span (click)="signup()" class="fa fa-envelope-o" 
     *ngIf="userEmail.touched && userEmail?.valid" // remove the !sign 
     style="position: relative;z-index: 1;cursor:pointer;left: -35px;width: 0; color:gray"></span> 

希望はあなたが探しているものです。