登录页,input监听方法

这篇博客对比了AngularJS和Angular6中实现登录表单的方式。在AngularJS中,表单使用`ng-model`来绑定数据,而在Angular6中,利用`formGroup`和`formControlName`进行表单控制。此外,两个版本的代码中都包含对输入焦点和值变化的处理,确保登录警告信息的显示和隐藏。
摘要由CSDN通过智能技术生成

1、angularjs版本:

<form class="login-form">
			<h3 class="form-title">登录</h3>
			<!--<div class="alert alert-danger display-block" data-ng-if="loginSpace.loginwaring">
				<button class="close" data-close="alert" data-ng-click="closeLoginwaring()"></button>
				<span>{{loginSpace.loginwaring_text}}</span>
			</div>-->
			<div class="form-group">
				<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
				<label class="control-label visible-ie8 visible-ie9">用户名</label>
				<input class="form-control form-control-solid placeholder-no-fix" type="text"  data-ng-focus="setFocus()" data-ng-change="setChange()" autocomplete="off" placeholder="用户名" name="username" data-ng-model="loginSpace.name" />
			</div>
			<div class="form-group">
				<label class="control-label visible-ie8 visible-ie9">密码</label>
				<input class="form-control form-control-solid placeholder-no-fix" type="password" data-ng-focus="setFocus()" data-ng-change="setChange()" autocomplete="off" placeholder="密码" name="password" data-ng-model="loginSpace.pass" />
			</div>
			<div class="form-group">
				<button type="button" class="btn btn-success" data-ng-click="login()" style="width: 100%;height: 43px;font-size: 16px;">登录</button>
				
			</div>
		</form>
$scope.setFocus = function(){
		$scope.loginSpace.loginwaring = false;
		$scope.loginSpace.loginwaring_text = "";
	};
	$scope.setChange = function(){
		$scope.loginSpace.loginwaring = false;
		$scope.loginSpace.loginwaring_text = "";
	};

 2、angular版本(本人代码用的angular6):

<form class="form-horizontal" id="userLogin" role="form" [formGroup]="formData">
          <h3 class="form-title">登录</h3>
          <div class="alert alert-danger display-block" *ngIf="loginwaring">
            <button class="close" data-close="alert" (click)="login()"></button>
            <span>{{loginwaring_text}}</span>
          </div>
          <div class="form-group">
            <input class="form-control" type="text" autocomplete="off" placeholder="Username" formControlName="username" (keydown)="keydown($event)" (focus)="inputfocus($event)" (ngModelChange)="inputchange($event)"/>
          </div>
          <div class="form-group">
            <input class="form-control  " type="password" autocomplete="off" placeholder="Password" formControlName="password" (keydown)="keydown($event)" (focus)="inputfocus($event)" (ngModelChange)="inputchange($event)"/>
          </div>
          <div class="form-group">
            <button type="button" class="btn green-haze" (click)="login()" style="width: 100%;height: 43px;font-size: 16px;">登录 </button>
          </div>
        </form>

  inputfocus(e: any): void {//焦点
    this.loginwaring = false;
    this.loginwaring_text =  "";
  }
  inputchange(e: any): void {//值改变,通过键盘改变焦点和登录时使用
    this.loginwaring = false;
    this.loginwaring_text =  "";
  }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值