无法读取未定义角度5的属性'形式'

时间:2018-05-18 18:24:46

标签: html angular forms typescript viewchild

我在角度

中有以下html表单
<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>

以及表格的以下打字稿:

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;
  }

我把它与我建立的其他形式进行了比较,但没有区别。可能是什么导致了这个?

当我打电话时,表格元素在dom上。提交按钮位于表单中。 @ViewChild元素语法正确且正确导入。我真的不明白,我准备好打一个孩子。

1 个答案:

答案 0 :(得分:1)

代码看起来很好......你可以尝试不使用view child,而是执行:

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

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

我肯定会尝试使用该控制台,以确保正确提交表单。