[英]touched and valid using reactive forms in Angular
How can i use the touched and valid properties using reactive forms in angular 4. I've used in template driven forms and you can just put this <span class="text-muted" *ngIf="!fname.valid && fname.touched"> Please enter a valid first name</span>
below the input field. 如何使用角度为4的反应形式使用触摸和有效属性。我已经在模板驱动的表单中使用了你可以把这个
<span class="text-muted" *ngIf="!fname.valid && fname.touched"> Please enter a valid first name</span>
在输入字段下方输入<span class="text-muted" *ngIf="!fname.valid && fname.touched"> Please enter a valid first name</span>
。 I've also learned that reactive forms would be better since you have to write the logic in the component.ts. 我还了解到反应形式会更好,因为你必须在component.ts中编写逻辑。 So i want it to implement in the reactive form and i'm stuck on how to use the touched and valid properties.
所以我希望它以反应形式实现,我坚持如何使用触摸和有效的属性。
html
HTML
<form [formGroup]="form" (ngSubmit)="onSignIn(form)">
<div class="form-group">
<input type="text" class="form-control" id="email" placeholder="Enter email" formControlName="email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password" formControlName="password">
</div><button class="btn btn-primary btn-block" type="submit" [disabled]="!form.valid">Sign In</button>
</form>
ts
TS
ngOnInit() {
this.form = this.formBuilder.group({
email: [null, [Validators.required, Validators.email]],
password: [null, Validators.required],
});
}
onSignIn(form: FormGroup){
const email = form.value.email;
const password = form.value.password;
this.authService.loginUser(email, password)
.subscribe(
data => {
this.router.navigate(['/settings']);
alert("Login Successful");
console.log(data);
},
error => {
alert("Invalid Email or Password");
console.log(error);
});
}
试试这个
<span class="text-muted" *ngIf="!form.controls['email'].valid && form.controls['email']?.touched"> Please enter a valid first name</span>
You can use it in similar way. 您可以以类似的方式使用它。 To get the FormControl use get method on FormGroup object and then hasError :
要获取FormControl,请在FormGroup对象上使用get方法,然后使用hasError :
// in your template form.get('email').hasError('required') && form.get('email').touched form.get('email').hasError('email') && form.get('email').touched form.get('password').hasError('required') && form.get('password').touched
You can also create some nice methods/getters for that in your component. 您还可以在组件中为其创建一些不错的方法/ getter。
edit (full code) 编辑(完整代码)
<form [formGroup]="form" (ngSubmit)="onSignIn(form)"> <div class="form-group"> <input type="text" class="form-control" id="email" placeholder="Enter email" formControlName="email"> <span class="text-muted" *ngIf="form.get('email').hasError('required') && form.get('email').touched">Email is required</span> </div> <div class="form-group"> <input type="password" class="form-control" id="password" placeholder="Password" formControlName="password"> <span class="text-muted" *ngIf="form.get('password').hasError('required') && form.get('password').touched">Password is required</span> </div><button class="btn btn-primary btn-block" type="submit" [disabled]="!form.valid">Sign In</button> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.