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

From ngModel line remove #name – salah-1 Feb 20 '18 at 11:24 — salah-1, Feb 20 '18 at 11:24

score 0 · Accepted Answer · answered Feb 20 '18 at 11:08

0

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

answered Feb 20 '18 at 11:08

ceurif

16
3

That was the problem, I had forgotten to define the model! Thank you – Init Feb 20 '18 at 11:14

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

1 Answers1