Skip to content
This repository has been archived by the owner on Feb 22, 2018. It is now read-only.

Commit

Permalink
feat(ng-model): implemented support for input[type=password]
Browse files Browse the repository at this point in the history
  • Loading branch information
nerdrew authored and pavelgj committed Dec 7, 2013
1 parent 9735591 commit 058c8ee
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 0 deletions.
1 change: 1 addition & 0 deletions lib/directive/module.dart
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ class NgDirectiveModule extends Module {
value(InputNumberDirective, null);
value(InputRadioDirective, null);
value(InputTextDirective, null);
value(InputPasswordDirective, null);
value(InputUrlDirective, null);
value(InputCheckboxDirective, null);
value(TextAreaDirective, null);
Expand Down
21 changes: 21 additions & 0 deletions lib/directive/ng_model.dart
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,27 @@ class InputTextDirective extends _InputTextlikeDirective {
}
}

/**
* Usage:
*
* <input type="password" ng-model="name">
*
* This creates a two way databinding between the expression specified in
* ng-model and the password input element in the DOM.  If the ng-model value is
* `null`, it is treated as equivalent to the empty string for rendering
* purposes.
*/
@NgDirective(selector: 'input[type=password][ng-model]')
class InputPasswordDirective extends _InputTextlikeDirective {
InputPasswordDirective(dom.Element inputElement, NgModel ngModel, Scope scope):
super(inputElement, ngModel, scope);

String get typedValue => inputElement.value;
set typedValue(String value) {
inputElement.value = (value == null) ? '' : value;
}
}

/**
* Usage:
*
Expand Down
63 changes: 63 additions & 0 deletions test/directive/ng_model_spec.dart
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,69 @@ describe('ng-model', () {
}));
});

describe('type="password"', () {
it('should update input value from model', inject(() {
_.compile('<input type="password" ng-model="model">');
_.rootScope.$digest();

expect((_.rootElement as dom.InputElement).value).toEqual('');

_.rootScope.$apply('model = "misko"');
expect((_.rootElement as dom.InputElement).value).toEqual('misko');
}));

it('should render null as the empty string', inject(() {
_.compile('<input type="password" ng-model="model">');
_.rootScope.$digest();

expect((_.rootElement as dom.InputElement).value).toEqual('');

_.rootScope.$apply('model = null');
expect((_.rootElement as dom.InputElement).value).toEqual('');
}));

it('should update model from the input value', inject(() {
_.compile('<input type="password" ng-model="model" probe="p">');
Probe probe = _.rootScope.p;
var ngModel = probe.directive(NgModel);
InputElement inputElement = probe.element;

inputElement.value = 'abc';
_.triggerEvent(inputElement, 'change');
expect(_.rootScope.model).toEqual('abc');

inputElement.value = 'def';
var input = probe.directive(InputPasswordDirective);
input.processValue();
expect(_.rootScope.model).toEqual('def');

}));

it('should write to input only if value is different', inject(() {
var scope = _.rootScope;
var model = new NgModel(scope, new NodeAttrs(new DivElement()));
var element = new dom.InputElement();
dom.query('body').append(element);
var input = new InputPasswordDirective(element, model, scope);

element.value = 'abc';
element.selectionStart = 1;
element.selectionEnd = 2;

model.render('abc');

expect(element.value).toEqual('abc');
expect(element.selectionStart).toEqual(1);
expect(element.selectionEnd).toEqual(2);

model.render('xyz');

expect(element.value).toEqual('xyz');
expect(element.selectionStart).toEqual(1);
expect(element.selectionEnd).toEqual(2);
}));
});

describe('type="checkbox"', () {
it('should update input value from model', inject((Scope scope) {
var element = _.compile('<input type="checkbox" ng-model="model">');
Expand Down

0 comments on commit 058c8ee

Please sign in to comment.