Angular ng模型错误如果在表单标记中使用ngModel，则必须设置name属性或表单

无法绑定ng模型，我必须通过此重定向到仪表板页面

登录

如果没有实际绑定到组件的模型，为什么要在这里使用ngModel？这可能是问题的根源。如果有理由将其放在此处，请将其删除或在其属性中添加一个

name=“submit”

---

o/

这是出于设计，如果在表单中使用

ngModel

，则必须使用

name

属性。例如

这不应该是通过接受用户名和密码实现ng模式的方法。如果用户单击提交按钮时凭证相同，则页面将重定向到仪表板。在组件中声明两个名为

用户名和密码的属性。
<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>

@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']);
        }
    }
}