You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
pocketcommunityweb/src/app/account/register/register.component.html

91 lines
4.1 KiB

<!--设置高度,添加bootstrap样式类d-flex align-items-center 使表单垂直居中,justify-content-center水平居中-->
<div [style]="height" class="d-flex align-items-center justify-content-center">
<form [formGroup]="registerForm" class="col-6">
<!-- 管理员名-->
<div class="input-group mb-3 mx-auto col-7">
<div class="input-group-prepend">
<span class="input-group-text">{{ 'login.manager_name' | translate }}</span>
</div>
<input type="text" class="form-control text-center" [class.is-invalid]="checkValue('managerName')"
[placeholder]="'tip.input' | translate:{value:'login.manager_name'|translate}"
formControlName="managerName"/>
<div class="invalid-feedback font-weight-bold text-center">
{{'tip.notnull' | translate:{value:'login.manager_name'|translate} }}
</div>
</div>
<!-- 管理员密码-->
<div class="input-group mb-3 mx-auto col-7">
<div class="input-group-prepend">
<span class="input-group-text">{{ 'login.password' | translate }}</span>
</div>
<input autocomplete="password" type="password" class="form-control text-center"
[class.is-invalid]="checkValue('password')"
[placeholder]="'tip.input' | translate:{value:'login.password'|translate}" formControlName="password"/>
<div class="invalid-feedback font-weight-bold text-center">
{{'tip.notnull' | translate:{value:'login.password'|translate} }}
</div>
</div>
<!-- 管理员确认密码-->
<div class="input-group mb-3 mx-auto col-7">
<div class="input-group-prepend">
<span class="input-group-text">{{ 'register.confirm_pwd' | translate }}</span>
</div>
<input autocomplete="confirmPassword" type="password" class="form-control text-center"
[class.is-invalid]="(checkPwd()|async) !==''"
[placeholder]="'tip.input' | translate:{value:'register.confirm_pwd'|translate}"
formControlName="confirmPassword"/>
<div class="invalid-feedback font-weight-bold text-center">
{{ checkPwd()|async }}
</div>
</div>
<!-- 手机号-->
<div class="input-group mb-3 mx-auto col-7">
<div class="input-group-prepend">
<span class="input-group-text">{{ 'register.mobile' | translate }}</span>
</div>
<input type="number" class="form-control text-center" [class.is-invalid]="(checkMobile()|async) !==''"
[placeholder]="'tip.input' | translate:{value:'register.mobile'|translate}" formControlName="mobile"/>
<div class="invalid-feedback font-weight-bold text-center">
{{ checkMobile()|async }}
</div>
</div>
<!-- 邮箱-->
<div class="input-group mb-3 mx-auto col-8">
<div class="input-group-prepend">
<span class="input-group-text">{{ 'register.email' | translate }}</span>
</div>
<input type="text" class="form-control text-center"
[placeholder]="'tip.input' | translate:{value:'register.email'|translate}" formControlName="email" [class.is-invalid]="checkValue('email')" />
<select class="custom-select" formControlName="emailType">
<option selected value="-1">{{'tip.select'|translate:{value:'register.email_type'|translate} }}</option>
<option *ngFor="let item of (emailType$|async)?.body" [value]="item.suffix">{{item.name}}</option>
</select>
<div class="invalid-feedback font-weight-bold text-center">
{{'tip.notnull' | translate:{value:'register.email'|translate} }}
</div>
</div>
<div class="col-7 mx-auto text-center mb-3">
<!-- 注册按钮-->
<button type="button" (click)="register()" [class.disabled]="checkForm()" [disabled]="checkForm()"
class="btn btn-primary btn-lg disabled">{{ 'button.register' | translate }}</button>
<!-- 返回登陆按钮-->
<button type="button" [routerLink]="['/login']"
class="btn btn-info btn-lg ml-3">{{ 'button.backLogin' | translate }}</button>
</div>
<app-message></app-message>
</form>
</div>