Open pengkobe opened 7 years ago
HTML 开发
<form [formGroup]="userForm" (ngSubmit)="Login()" class="form-horizontal" role="form" novalidate>
<div class="form-group" [ngClass]="{'has-error': formErrors.userName }">
<label class="col-sm-3 control-label">userName</label>
<div class="col-sm-8">
<input formControlName="userName" type="text" class="form-control" >
<div *ngIf="formErrors.userName" class="text-danger">
{{ formErrors.userName }}
</div>
</div>
</div>
<div class="form-group" [ngClass]="{'has-error': formErrors.password }">
<label class="col-sm-3 control-label">password</label>
<div class="col-sm-8">
<input formControlName="password" reverse=true
type="password" class="form-control" >
<div *ngIf="formErrors.password" class="text-danger">
{{ formErrors.password }}
</div>
</div>
</div>
<div *ngIf="formErrors.formError" class="alert-danger">{{ formErrors.formError }}</div>
<div class="form-group">
<button [disabled]="userForm.invalid" type="submit" class="btn btn-success">Login</button>
</div>
</form>
JS 开发
导入相关库文件
构建验证逻辑
创建表单
监听输入