bug fixed: login

This commit is contained in:
Dani Herrero 2017-09-12 12:45:29 +02:00
parent 22f2d3e7f3
commit c90be5bd04
2 changed files with 48 additions and 30 deletions

View File

@ -1,18 +1,20 @@
<div class="mdl-textfield mdl-js-textfield {{$ctrl.className}}"> <div class="mdl-textfield mdl-js-textfield {{$ctrl.className}}">
<input <input
class="mdl-textfield__input" class="mdl-textfield__input"
type="{{$ctrl.type}}" type="{{$ctrl.type}}"
name="{{$ctrl.name}}" name="{{$ctrl.name}}"
ng-model="{{$ctrl.model}}" ng-model="$ctrl.value"
vn-validation="{{$ctrl.rule}}" vn-validation="$ctrl.rule"
ng-disabled="{{$ctrl.disable}}"/> ng-disabled="$ctrl.disable"
<button />
type="button" <button
class="mdl-chip__action" type="button"
tabindex="-1" class="mdl-chip__action"
translate-attr="{title: 'Clear'}" tabindex="-1"
style="visibility: hidden"> translate-attr="{title: 'Clear'}"
style="visibility: hidden"
>
<i class="material-icons">clear</i> <i class="material-icons">clear</i>
</button> </button>
<label class="mdl-textfield__label" translate="{{$ctrl.label}}"></label> <label class="mdl-textfield__label">{{$ctrl.label | translate}}</label>
</div> </div>

View File

@ -1,16 +1,20 @@
import {module} from '../module'; import { module } from '../module';
import Component from '../lib/component';
// import * as resolveFactory from '../lib/resolveDefaultComponents'; // import * as resolveFactory from '../lib/resolveDefaultComponents';
// import * as normalizerFactory from '../lib/inputAttrsNormalizer'; // import * as normalizerFactory from '../lib/inputAttrsNormalizer';
import './style.scss'; import './style.scss';
// import './textfield.mdl'; // import './textfield.mdl';
export default class TextfieldController { export default class TextfieldController extends Component {
constructor($element, $scope, $attrs) { constructor($element, $scope, $attrs) {
super($element);
this.$scope = $scope; this.$scope = $scope;
this.$attrs = $attrs; this.$attrs = $attrs;
let input = this.input = this.$element.querySelector('input'); this.$element = $element[0];
let input = this.input = $element[0].querySelector('input');
input.addEventListener('input', input.addEventListener('input',
() => this.checkValue()); () => this.checkValue());
input.addEventListener('focus', input.addEventListener('focus',
@ -27,7 +31,17 @@ export default class TextfieldController {
let div = this.$element.firstChild; let div = this.$element.firstChild;
componentHandler.upgradeElement(div); componentHandler.upgradeElement(div);
Object.assign(this, $attrs); this._value = null;
this.type = this.$attrs.type || 'text';
}
get value() {
return this._value;
}
set value(value) {
this._value = (value === undefined || value === '') ? null : value;
} }
$onInit() { $onInit() {
@ -37,9 +51,10 @@ export default class TextfieldController {
this.$scope.$watch(this.$attrs.model, this.$scope.$watch(this.$attrs.model,
() => mdlTextField.updateClasses_()); () => mdlTextField.updateClasses_());
let $input = angular.$element(this.input); /* let $input = angular.element(this.input);
$input.controller('ng-model').$parsers.push(value => value === '' ? null : value); $input.controller('ng-model').$parsers.push(value => value === '' ? null : value);*/
} }
onClearClick() { onClearClick() {
this.input.value = null; this.input.value = null;
this.checkValue(); this.checkValue();
@ -48,23 +63,21 @@ export default class TextfieldController {
event.initEvent('change', false, true); event.initEvent('change', false, true);
this.input.dispatchEvent(event); this.input.dispatchEvent(event);
} }
checkValue() { checkValue() {
this.showClear(this.input.value); this.showClear(this.input.value);
} }
showClear(show) { showClear(show) {
show = show && document.activeElement === this.input; show = (show && document.activeElement === this.input);
let clearButton = this.$element.querySelector('button'); let clearButton = this.$element.querySelector('button');
clearButton.style.visibility = show ? 'visible' : 'hidden'; clearButton.style.visibility = show ? 'visible' : 'hidden';
} }
/**
* Selects the textfield.
*/
select() { select() {
this.input.select(); this.input.select();
} }
/**
* Puts the focus on the textfield.
*/
focus() { focus() {
this.input.focus(); this.input.focus();
} }
@ -73,5 +86,8 @@ TextfieldController.$inject = ['$element', '$scope', '$attrs'];
module.component('vnTextfield', { module.component('vnTextfield', {
template: require('./textfield.html'), template: require('./textfield.html'),
controller: TextfieldController controller: TextfieldController,
bindings: {
value: '=model'
}
}); });