[英]I am getting the following error: ERROR TypeError: Cannot read property 'invalid' of undefined
I have tried other solutions such as fixing form references but that didn't help me. 我尝试了其他解决方案,例如修复表单引用,但这并没有帮助我。 Here is my form for a login
这是我的登录表格
<form [formGroup]="longinForm" (ngSubmit)="onSubmit()">
<h1>Login Form</h1>
<div class="form-group" >
<label for="name" >Username</label>
<input type="text" name ="user" [(ngModel)]="loginuserdata.user"
#user="ngModel"
class="form-control" required >
<div *ngIf="submitted">
<div [hidden]="user.valid || user.pristine" class="alert alert-danger">
Username is required
</div>
</div>
</div>
<div class="form-group" >
<label for="pass" >Password</label>
<input type="text" name="pass" [(ngModel)]="loginuserdata.pass" #pass="ngModel"
class="form-control" required >
<div *ngIf="submitted">
<div [hidden]="pass.valid || pass.pristine" class="alert alert-danger">
Password is required
</div>
</div>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
also here is my login component 这也是我的登录组件
import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { LoginService } from './login.service';
import { ILoginData } from './login-data';
@Component({
selector: 'app-loginform',
templateUrl: './loginform.component.html',
styleUrls: ['./loginform.component.css']
})
export class LoginformComponent implements OnInit {
loginForm:FormGroup;
loginuserdata : any[] = [];
error:string;
submitted=false;
constructor(private route: Router,private service:LoginService) { }
get f(){return this.loginForm.controls;}
ngOnInit() {
this.onSubmit();
}
onSubmit(){
if(this.loginForm.invalid){return;}//form invalid stop here
//form is valid do something
this.submitted=true;
if(this.f.user.value == "Admin" && this.f.pass.value == "Apassword"){
this.service.getAdmin()
.subscribe(data => this.loginuserdata = data)
this.route.navigateByUrl('admin');
err => this.error = err;
console.log(this.error);
}
}
}
If you guys need to see any other pieces of my code let me know please help me out I tried something similar to an answer solved to this but it didn't work for me. 如果你们需要查看我的代码的其他任何部分,请告诉我,请帮助我,我尝试了类似于解决此问题的方法,但对我而言不起作用。
You need to build the form controls, you have it defined but you need something like the following. 您需要构建表单控件,已定义它,但是需要类似以下内容的东西。 You need to initialise the form group.
您需要初始化表单组。
import { NgForm, FormGroup, FormBuilder } from '@angular/forms';
//Be sure to import formBuilder and inject through constructor. This will allow you
//to manage how you will build the form and add validation.
//Its a helper class provided by Angular to help us explicitly declare forms.
constructor( private formBuilder: FormBuilder ){}
public ngOnInit(): void {
this.loginForm = this.formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
This is where you can define the controls and the validators for the form group. 在这里您可以定义表单组的控件和验证器。 (This example would just dictate that there needs to be a value for each in order to be valid. This should be built in the
ngOnInit
. (此示例仅表明每个值都必须具有一个值才能生效。这应该在
ngOnInit
。
Then in your template you can remove the [(ngModel)]
and make it look like the following. 然后,可以在模板中删除
[(ngModel)]
,使其看起来如下所示。 The value for the input will then be held within the control when you need to access it. 当您需要访问输入时,输入值将保留在控件中。
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<input type="text" name ="user" [formControlName]="'username'"
class="form-control" required>
<form>
Above would serve as an example for the login username / email. 以上将作为登录用户名/电子邮件的示例。 Also as mentioned in the comments you have a typo in the form in the HTML.
另外,如注释中所述,您在HTML表单中有一个错字。
This should then be valid when you are trying to access the valid
and invalid
properties of the from group. 然后,当您尝试访问from组的
valid
和invalid
属性时,它应该是有效的。 Comment if you have any trouble. 如果您有任何困难,请发表评论。
Here is the Angular documentation for reactive forms . 这是有关反应形式的Angular文档 。
How about you do this. 那你呢
ngAfterViewInit() { this.onSubmit() }
I think it was not yet defined at ngOninit. 我认为ngOninit尚未定义它。 Check Life Cycle.
检查生命周期。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.