angular - 我想在我的 ionic 应用程序中创建一个模板驱动的表单，并通过验证它给出错误

Question

每当我ngModel与 id 一起使用时，它都会出错。如果我不使用它，那么它会显示一个错误，即 invalid is not any property。请告诉我哪里出错了。

<form   #loginform="ngForm" novalidate (ngSubmit)="onLogin()">
    <ion-list>
        <ion-item>
            <ion-label position="floating">Email </ion-label>
            <ion-input type="text" id="email" class="form-control" name="email" pattern="^[a-zA-z0- 
                9_.+-]+@[a-zA-z0-9-]+[.][a-zA-Z0-9-.]+$" required >
            </ion-input>
            <div *ngIf="email.invalid"> *Please enter valid Email</div>
        </ion-item>
        <ion-item>
            <ion-label position="floating">Password </ion-label>
            <ion-icon name="eye-outline" (click)="hide = !hide">{{hide ? 'visibility_off' : 
                'visibility'}}</ion-icon>
            <ion-input type="password" maxlength="8" id="password" class="form-control" name="password" 
                [type]="hide ? 'password' : 'text'" required >
           </ion-input>
            <div *ngIf="password.invalid &&(password.dirty || password.touched)"> *Please enter valid
                Password</div>
        </ion-item>
    </ion-list>
    <ion-button  (click)="onLogin()" [disabled]="loginform.form.invalid">Login</ion- 
        button>
</form>