0

I have the following html form in angular

<form (ngSubmit)="signin()" #signinform="ngForm">
      <div class="form-group row">
        <label for="signinemail" class="col-sm-2 col-form-label">Email:</label>
        <div class="col-sm-10">
          <input type="email"
                 class="form-control"
                 id="signinemail"
                 name="signinemail"
                 ngModel
                 placeholder="Email">
        </div>
      </div>
      <div class="form-group row">
        <label for="signinpassword" class="col-sm-2 col-form-label">Password:</label>
        <div class="col-sm-10">
          <input type="password"
                 class="form-control"
                 id="signinpassword"
                 name="signinpassword"
                 ngModel
                 placeholder="Password">
        </div>
      </div>
      <div class="form-group">
        <div class="form-check">
          <input class="form-check-input ml-0"
                 type="checkbox"
                 id="gridCheck"
                 name="remembercheckbox"
                 ngModel>
          <label class="form-check-label" for="gridCheck">
            &nbsp; &nbsp; Remember Me
          </label>
        </div>
        <small class="form-text text-muted">Forget Password?</small>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Sign In</button>
        <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
      </div>
    </form>

and the following typescript for the form: 

import {NgForm} from "@angular/forms";
@ViewChild('signinform') signinform: NgForm;
  signin() {
    let payload = {
      email: this.signinform.form.value.signinemail,
      password: this.signinform.form.value.signinpassword,
      localstorage: this.signinform.form.value.remembercheckbox
    };
    this.userservice.gettoken(payload);
    this.signedin = true;
  }

I have compared this to other forms I have built and yet there is no difference. What could be causing this?

the form element is on the dom when I call. The submit button is within the form. The @ViewChild element syntax is correct and properly imported. I truly don't understand and I am ready to punch a baby.

1 Answers1

2

The code looks fine...You could just try not using view child, and instead do:

<form (ngSubmit)="signin(signinform)" #signinform="ngForm">

  signin(form: NgForm) {
    console.log(form);
  }

I'd definitely try that console though, to make sure the form is being submitted properly.

David Anthony Acosta
  • 4,766
  • 1
  • 19
  • 19
  • it worked. I don't know why it worked. But it worked. WTF.... Can you explain why this may have worked over viewchild? its 9 minutes until it will allow me to accept your answer –  May 18 '18 at 18:31
  • 4
    From here, your code looks fine. The only criteria for view child to work is that the item has to be in the View. So that means that it can't be within an *ngIf, for example. Other than that, I can't think of any reason why it wouldn't work. I've done what you did a million times lol...Might just be a random thing with angular lol – David Anthony Acosta May 18 '18 at 18:33