javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(input): pass readonly from ion-input down to native input

Browse Source 
also adds to placeholder test an input and textarea with readonly that can be toggled

fixes #6408
This commit is contained in:
Brandy Carney
2017-01-23 12:36:46 -05:00
committed by Adam Bradley
parent 7a6ba2d300
commit f9a576ed93
3 changed files with 35 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/input/input.ts
View File

@ -80,8 +80,8 @@ import { Platform } from '../../platform/platform';
@Component({
selector: 'ion-input,ion-textarea',
template:
'<input [(ngModel)]="_value" [type]="type" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" [disabled]="disabled" class="text-input" [ngClass]="\'text-input-\' + _mode" *ngIf="_type!==\'textarea\'" #input>' +
'<textarea [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" [disabled]="disabled" class="text-input" [ngClass]="\'text-input-\' + _mode" *ngIf="_type===\'textarea\'" #textarea></textarea>' +
'<input [(ngModel)]="_value" [type]="type" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" [disabled]="disabled" [readonly]="readonly" class="text-input" [ngClass]="\'text-input-\' + _mode" *ngIf="_type!==\'textarea\'" #input>' +
'<textarea [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" [disabled]="disabled" [readonly]="readonly" class="text-input" [ngClass]="\'text-input-\' + _mode" *ngIf="_type===\'textarea\'" #textarea></textarea>' +
'<input [type]="type" aria-hidden="true" next-input *ngIf="_useAssist">' +
'<button ion-button clear [hidden]="!clearInput" type="button" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' +
'<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>',
@ -96,6 +96,7 @@ export class TextInput extends Ion implements IonicFormInput {
_coord: PointerCoordinates;
_didBlurAfterEdit: boolean;
_disabled: boolean = false;
_readonly: boolean = false;
_isTouch: boolean;
_keyboardHeight: number;
_native: NativeInput;
@ -164,7 +165,7 @@ export class TextInput extends Ion implements IonicFormInput {
@Input() placeholder: string = '';
/**
* @input {bool} A clear icon will appear in the input when there is a value. Clicking it clears the input.
* @input {boolean} A clear icon will appear in the input when there is a value. Clicking it clears the input.
*/
@Input()
get clearInput() {
@ -208,7 +209,7 @@ export class TextInput extends Ion implements IonicFormInput {
}
/**
* @input {bool} If the input should be disabled or not
* @input {boolean} If the input should be disabled or not
*/
@Input()
get disabled() {
@ -226,6 +227,17 @@ export class TextInput extends Ion implements IonicFormInput {
this._native && this._native.isDisabled(val);
}
/**
* @input {boolean} If the input should be readonly or not
*/
@Input()
get readonly() {
return this._readonly;
}
set readonly(val: boolean) {
this._readonly = isTrueProperty(val);
}
/**
* @input {string} The mode to apply to this component.
*/

9
src/components/input/test/placeholder-labels/app.module.ts
View File

@ -5,7 +5,14 @@ import { IonicApp, IonicModule } from '../../../../../ionic-angular';
@Component({
templateUrl: 'main.html'
})
export class E2EPage {}
export class E2EPage {
isReadonly: boolean = true;
toggleReadonly() {
this.isReadonly = !this.isReadonly;
}
}
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'

11
src/components/input/test/placeholder-labels/main.html
View File

@ -2,6 +2,9 @@
<ion-toolbar>
<ion-title>Placeholder Label Text Input</ion-title>
<ion-buttons end>
<button ion-button (click)="toggleReadonly()">Toggle</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
@ -19,6 +22,10 @@
<ion-input placeholder="Text Input Placeholder" value="Text Input Value"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Text Input Readonly" [readonly]="isReadonly" value="Text Input Readonly"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="call" item-left></ion-icon>
<ion-input placeholder="Text Input Placeholder"></ion-input>
@ -37,6 +44,10 @@
<ion-textarea placeholder="ion-textarea Placeholder" value="Textarea value"></ion-textarea>
</ion-item>
<ion-item>
<ion-textarea placeholder="ion-textarea Readonly" [readonly]="isReadonly" value="Textarea Readonly"></ion-textarea>
</ion-item>
</ion-list>
<ion-list inset>