NG模型错误如果在表单标签中使用NGMODEL，则必须设置名称属性或表单

Question

<div class="container">    
<mat-card>
    <mat-card-header>
        <mat-card-title>
           <h2>Login</h2>  
        </mat-card-title>
        <mat-card-subtitle>
            Enter your details:- 
        </mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
        <form (ngsubmit)="onSubmit(f)" #f="ngForm">
            <div class="form-group">
                <i class="material-icons">account_circle</i>
                <mat-input-container>
                  <input matInputtype="text" ngModel)]="username" name="username" placeholder="Username" ng-Model>
            </mat-input-container>
        </div>
            <div class="form-group">
                <i class="material-icons">lock</i> 
                <mat-form-field>
                    <input matInput placeholder="Enter your password" 
                    [(ngModel)]="password" name="password" [type]=" hide ? 'password' : 'text'" ngModel>
                <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
              </mat-form-field>
            </div>
            <div>
                <a href="" class="pass-forgot">Forgot your password?</a>
           </div>
           <mat-card-actions>
            <div class="form-group"> 
                <button mat-button  mat-color="primary" type="submit" ngModel>Login</button>
               <button mat-button>Cancel</button>
               <button (click)="showRegister()" mat-button>Register</button>
            </div>
       </mat-card-actions>
            </form>
    </mat-card-content>   
</mat-card>
</div>

login.component.ts

@Component({
    selector:'app-login',
    templateUrl:'./login.view.html',
    styleUrls:['./login.component.css']
})
export class loginComponent implements OnInit {
    constructor(private router:Router,private user:UserService) { }
    ngOnInit() {
      console.log('hit');
    }
    // loginUser(e) {
    //     e.preventDefault();
    //     console.log(e);
    //     var username = e.target.elements[0].value;
    //     var password = e.target.elements[1].value;
    //     if(username == 'admin' && password == 'admin') {
    //        this.user.setUserLoggedIn();
    //         this.router.navigate(['Dashboard']);
    //     }
    // }
    onSubmit(form: NgForm)
    {
        console.log("click");
        const username = form.value.username;
        const password = form.value.password;

        if(username == 'admin' && password == 'admin') {
                    this.user.setUserLoggedIn();
                     this.router.navigate(['Dashboard']);
        }
    }
}

CATE CATE BINGING NG模型，我必须通过此重定向到仪表板页面。

Answer 1

<button mat-button mat-color="primary" type="submit" ngModel>Login</button>

，如果您实际上没有与组件的模型绑定，为什么在这里ngmodel？这可能导致了这个问题。如果有理由在此处删除它或将name="submit"添加到其属性中。

o/