Ошибка модели ng Если в теге формы используется ngModel, необходимо указать либо атрибут name, либо форму

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

Не могу связать модель NG, и я должен перенаправить на страницу панели инструментов этим.

Answer 1

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

Зачем здесь ngModel, если вы на самом деле не привязаны к модели компонента? Это, вероятно, вызывает проблему. Либо удалите его, либо добавьте name="submit" к его атрибутам, если для этого есть причина.

о /