diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 09d65d9a9ca..7118bcc5b7a 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -80,8 +80,8 @@ import { Platform } from '../../platform/platform'; @Component({ selector: 'ion-input,ion-textarea', template: - '' + - '' + + '' + + '' + '' + '' + '
', @@ -120,7 +120,7 @@ export class TextInput extends Ion implements IonicFormInput { @Optional() private _content: Content, @Optional() private _item: Item, @Optional() nav: NavController, - @Optional() ngControl: NgControl, + @Optional() public ngControl: NgControl, private _dom: DomController ) { super(config, elementRef, renderer, 'input'); @@ -212,7 +212,7 @@ export class TextInput extends Ion implements IonicFormInput { */ @Input() get disabled() { - return this._disabled; + return this.ngControl ? this.ngControl.disabled : this._disabled; } set disabled(val: boolean) { this.setDisabled(this._disabled = isTrueProperty(val)); @@ -293,6 +293,7 @@ export class TextInput extends Ion implements IonicFormInput { setNativeInput(nativeInput: NativeInput) { this._native = nativeInput; nativeInput.setValue(this._value); + nativeInput.isDisabled(this.disabled); if (this._item && this._item.labelId !== null) { nativeInput.labelledBy(this._item.labelId); diff --git a/src/components/input/test/form-inputs/app-module.ts b/src/components/input/test/form-inputs/app-module.ts index 0d6e7e66844..e69c4e4e518 100644 --- a/src/components/input/test/form-inputs/app-module.ts +++ b/src/components/input/test/form-inputs/app-module.ts @@ -18,11 +18,6 @@ export class E2EPage { comments: '' }; - user = { - username: 'asdf', - password: '82' - }; - submitted: boolean = false; isTextAreaDisabled: boolean; @@ -39,8 +34,10 @@ export class E2EPage { }); this.userForm = fb.group({ - username: ['', Validators.required], - password: ['', Validators.required], + email: ['', Validators.required], + username: [{value: 'administrator', disabled: true}, Validators.required], + password: [{value: 'password', disabled: false}, Validators.required], + comments: [{value: 'Comments are disabled', disabled: true}, Validators.required] }); } @@ -52,7 +49,7 @@ export class E2EPage { } } - submit(ev: UIEvent, value: any) { + submit(ev: UIEvent, value?: any) { console.log('Submitted', value); this.submitted = true; } @@ -61,6 +58,14 @@ export class E2EPage { this.isTextAreaDisabled = !this.isTextAreaDisabled; } + toggleDisable() { + let userNameCtrl = this.userForm.get('username'); + userNameCtrl.enabled ? userNameCtrl.disable() : userNameCtrl.enable(); + + let commentsCtrl = this.userForm.get('comments'); + commentsCtrl.enabled ? commentsCtrl.disable() : commentsCtrl.enable(); + } + } @Component({ diff --git a/src/components/input/test/form-inputs/main.html b/src/components/input/test/form-inputs/main.html index 2fc5a45b851..c160bbd4fe2 100644 --- a/src/components/input/test/form-inputs/main.html +++ b/src/components/input/test/form-inputs/main.html @@ -54,24 +54,38 @@ -