[英]Change the Input Type of Inputs in Alert Controller in Ionic
是否可以使用提示本身内的唯一按钮修改警报 Controller 中的输入类型?
问题:
更改密码代码 (profile.ts)
async changePassword(){
let alert = await this.alertCtrl.create({
header: 'Change Password',
subHeader: 'Fill up the fields.',
inputs: [
{
name: 'oldPassword',
placeholder: 'Old Password.',
type: 'password'
},
{
name: 'newPassword',
placeholder: 'New Password.',
type: 'password',
value: this.generatePassword(8) //This generate the password
},
{
name: 'newPasswordConfirm',
placeholder: 'Confirm New Password',
type: 'password'
}
],
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: data => {
console.log('Cancel clicked.');
}
},
{
text: 'View Password',
handler: data => {
data.newPassword.type = 'text'; //Error exists
return false;
}
}
]
});
await alert.present();
}//
实际错误
AlertController 无法满足您的要求。 它是一个非常基本的组件,它只返回一个 json object 给您,而不是表单本身。
出于您的目的,您应该按照 Ravi 在评论中的建议进行操作,使用带有自定义组件的 PopoverController。
您可以从上面的链接中获取其余部分,但这里是您关心的部分:
Popovercomponent.page.ts
import { Component } from
'@angular/core';
import {PopoverController} from '@ionic/angular';
import { FormBuilder } from '@angular/forms';
@Component({
selector: 'app-popovercomponent',
templateUrl: './popovercomponent.page.html',
styleUrls: ['./popovercomponent.page.scss'],
})
export class PopovercomponentPage {
form = this.formBuilder.group({
newPassword: [''],
oldPassword: [''],
newPasswordText: [''],
oldPasswordText: [''],
});
showPassword = false;
doUpdate = false;
constructor(private popover:PopoverController,
private formBuilder: FormBuilder) {}
toggleShowPassword(): void {
this.showPassword = !this.showPassword;
if (showPassword) {
this.form.patchValue({
oldPasswordText: this.form.oldPassword.value,
newPasswordText: this.form.newPassword.value
});
} else {
this.form.patchValue({
oldPassword: this.form.oldPasswordText.value,
newPassword: this.form.newPasswordText.value
});
}
}
cancel(): void {
this.popover.dismiss();
}
update(): void {
this.doUpdate = true;
this.popover.dismiss();
}
}
Popovercomponent.page.html
<ion-content padding>
<ion-grid>
<form>
<ion-row *ngIf="!showPassword">
<ion-col><input type="password" [formControlName]="oldPassword" placeholder="Old Password"></ion-col>
</ion-row>
<ion-row *ngIf="showPassword">
<ion-col><input type="text" [formControlName]="oldPasswordText" placeholder="Old Password"></ion-col>
</ion-row>
<ion-row *ngIf="!showPassword">
<ion-col><input type="password" [formControlName]="newPassword" placeholder="Confirm new password"></ion-col>
</ion-row>
<ion-row *ngIf="showPassword">
<ion-col><input type="text" [formControlName]="newPasswordText" placeholder="Confirm new password"></ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button color="success" expand="block" (click)="update()">Update</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button color="success" expand="block" (click)="togglePassword()">View Password</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button color="success" expand="block" (click)="cancel()">Cancel</ion-button>
</ion-col>
</ion-row>
</form>
</ion-grid>
</ion-content>
一旦添加到您的主代码(未在您的问题中发布),您将能够通过弹出窗口 object 访问数据。
我会为每个输入分配一个 id
inputs: [
{
name: 'oldPassword',
placeholder: 'Old Password.',
type: 'password',
id: 'new-id'
},
然后我会像这样改变输入类型
let passwordInput = document.getElementsByClassName('new-id');
passwordInput.setAttribute('type', 'text')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.