angular - 表单的复选标记验证
问题描述
使用 Angular 4 实现了注册表单。当字段为空时,通过使用警告危险来验证输入表单。
请建议如何验证这些输入表单字段,例如。用户名,密码....通过在输入表单旁边使用复选标记。是验证意味着正确的符号不验证意味着x符号..目前我正在使用html typescript和angular 4。
谢谢..
解决方案
好的试试这个。
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Md5 } from 'ts-md5/dist/md5';
import { UserService } from './shared/user.service';
import { IUser, IUserAuth, IUserFeatures } from './shared/user.moldes';
@Component({
selector: 'app-login',
styleUrls: ['./login.component.scss'],
templateUrl: './login.component.html'
})
/**
* Class representing the LoginComponent.
*/
export class LoginComponent {
public userForm: FormGroup;
public username: string;
public password: string;
public submitted: boolean;
constructor(private formBuilder: FormBuilder) {
this.submitted = false;
this.buildForm();
}
/**
* Triggers when the user click on the login button.
*/
public onSubmit(): void {
this.submitted = true;
if (!this.userForm.valid) {
return;
}
const user: IUser = {
email: this.userForm.controls.username.value,
password: Md5.hashStr(this.userForm.controls.password.value),
};
this.userService.authenticateUser(user).subscribe(() => {
//
});
}
/**
* Builds the user login form.
*/
private buildForm(): void {
this.userForm = this.formBuilder.group({
username: [null,[Validators.required],
password: [null, Validators.required]
});
}
}
在模板.html
<form [formGroup]="userForm" (ngSubmit)="onSubmit()" novalidate class="form-wrapper">
<div class="form-group block"
[ngClass]="{'has-error': submitted && (userForm.controls.username.errors)}">
<label>Username</label>
<input type="text" class="form-control" formControlName="username">
<p>
<span *ngIf="submitted && userForm.controls.username.errors?.required">Username is required</span>
</p>
</div>
<div class="form-group block"
[ngClass]="{'has-error': submitted && (userForm.controls.password.errors)}">
<label>Password</label>
<input type="password" class="form-control" formControlName="password">
<p *ngIf="submitted && userForm.controls.password.errors?.required">Password is required</p>
</div>
<button type="submit" class="btn btn-default">Login</button>
<div>
<div *ngIf="submitted && userForm.valid">Tick</div>
<div *ngIf="submitted && !userForm.valid">X</div>
</div>
</form>
基于userForm.valid您可以显示隐藏图标。希望这可以帮助。
<div>
<div *ngIf="submitted && userForm.valid">Tick</div>
<div *ngIf="submitted && !userForm.valid">X</div>
</div>
推荐阅读
- google-places-api - Google Places 和 Autocomplete,更新到 New Places SDK 时出现问题
- xslt - XSLT 将 "params" 与 "match="@*|node()" 结合起来
- ios - uitableview 内的 UIWebview 和与 uitableview 的滚动相反的滚动
- javascript - API未在服务文件Angular 7中被调用
- javascript - ChartJs - 从后端动态显示数据
- javascript - 双击时是否有网格单元格(粘贴)事件
- html - 如何使用 bootstrap 4 创建响应式主页?
- ibm-cloud - 具有 Ingress 的 Kubernetes 集群 - 远程 IP
- r - R - 将函数插入 ggplot 以修改轴
- tfs - 如何获取 TFS 提要包的安装数量