无法读取未定义 angular 5 的 属性 'form'
Cannot read property 'form' of undefined angular 5
我在 angular
中有以下 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">
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
元素语法正确且已正确导入。实在是看不懂准备打娃
代码看起来不错...您可以尝试不使用子视图,而改为:
<form (ngSubmit)="signin(signinform)" #signinform="ngForm">
signin(form: NgForm) {
console.log(form);
}
不过,我肯定会尝试使用该控制台,以确保正确提交表单。
我在 angular
中有以下 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">
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
元素语法正确且已正确导入。实在是看不懂准备打娃
代码看起来不错...您可以尝试不使用子视图,而改为:
<form (ngSubmit)="signin(signinform)" #signinform="ngForm">
signin(form: NgForm) {
console.log(form);
}
不过,我肯定会尝试使用该控制台,以确保正确提交表单。