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

【问题标题】：ng model error If ngModel is used within a form tag, either the name attribute must be set or the formng 模型错误如果在表单标签中使用 ngModel，则必须设置名称属性或表单
【发布时间】：2018-10-05 15:16:57
【问题描述】：

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

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

【问题讨论】：

这是设计使然，如果您在表单中使用ngModel，那么您必须使用name 属性。例如<button mat-button mat-color="primary" type="submit" ngModel> 这不应该在那里
如何通过接受用户名和密码来实现 ng 模式，如果用户单击该提交按钮时凭据相同，则页面将被重定向到仪表板。
在你的组件中声明两个名为username,password的属性。

标签： angular

【解决方案1】：

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

如果您实际上没有绑定到组件的模型，为什么要在这里使用 ngModel？这可能是导致问题的原因。删除它或在其属性中添加 name="submit"（如果有原因）。

【讨论】：