我尝试了其他解决方案,例如修复表单引用,但这对我没有帮助。这是我的登录表单
<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
属性时,这应该是有效的。有什么问题可以评论。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句