![](/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.