如果文本框无效，隐藏按钮

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> 

这是* ngIf错了吗？按钮从不显示

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> 

希望这是你在找什么。