![](/img/trans.png)
[英]Why am getting this error TypeError: Cannot read property 'client' of undefined
[英]I am getting the following error: ERROR TypeError: Cannot read property 'invalid' of undefined
我尝试了其他解决方案,例如修复表单引用,但这并没有帮助我。 这是我的登录表格
<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>
这也是我的登录组件
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);
}
}
}
如果你们需要查看我的代码的其他任何部分,请告诉我,请帮助我,我尝试了类似于解决此问题的方法,但对我而言不起作用。
您需要构建表单控件,已定义它,但是需要类似以下内容的东西。 您需要初始化表单组。
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]
});
在这里您可以定义表单组的控件和验证器。 (此示例仅表明每个值都必须具有一个值才能生效。这应该在ngOnInit
。
然后,可以在模板中删除[(ngModel)]
,使其看起来如下所示。 当您需要访问输入时,输入值将保留在控件中。
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<input type="text" name ="user" [formControlName]="'username'"
class="form-control" required>
<form>
以上将作为登录用户名/电子邮件的示例。 另外,如注释中所述,您在HTML表单中有一个错字。
然后,当您尝试访问from组的valid
和invalid
属性时,它应该是有效的。 如果您有任何困难,请发表评论。
那你呢
ngAfterViewInit() { this.onSubmit() }
我认为ngOninit尚未定义它。 检查生命周期。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.