How to change attribute "name" of ion-input when its value changes?

Question

I'm building an hybrid app using Ionic3+AngularJS, and I'm stuck on this:

I have an input like this:

<ion-input name="test" type="number" placeholder="0" text-center></ion-input>

When the user changes the value of this input, I need that the attribute "name" changes its value too, like this:

<ion-input name="test-changed" type="number" placeholder="0" text-center></ion-input>

Is it even possible? Need help!

Answer 1

You change your template to:

<ion-input [name]="name" [(ngModel)]="value" (ngModelChange)="onValueChange()" type="number" placeholder="0" text-center></ion-input>

And in the component ts file:

@Component(...)
export class MyComponent {

    public value: string;
    public name: string = 'test';

    onValueChange() {
        this.name = 'test-changed';
    }

}

If you want that the name become test-changed only if there is something written in the input you could change the method onValueChange() to:

this.name = this.value ? 'test-changed' : 'test';