button disabled if text field empty and submit to next page if not with Angular

Question

I keep getting this error: ERROR TypeError: Cannot read property 'name' of undefined. All I want to do is submit to next page if input is not empty. I am currently working with Clarity Vmware and Angular 5.0.5 My html looks something like this:

 <form #loginForm="ngForm" (ngSubmit)="onSubmit">
 <label for="name"> Text </label>
 <input type="text" class="form-control" id="name" required 
 [(ngModel)]="model.name" name="name" #name="ngModel"> 


 <button type="button" class="btn btn-primary" 
 [disabled]="loginForm.form.invalid"> Submit </button>

 </form>

And my function in typescript :

submitted = false;
onSubmit() {
if(this.submitted = true) {
this.router.navigate(['nextPage']); } }
constructor(private router: Router) {}

I looked through similas questions but none of them could answer my question. Why am I getting the error above and how can I make it successfully navigate to next page IF input not empty? Thank you in advanced

Answer 1

Check if model is defined in your typescript code. Please upload error message screenshot