Изменить тип ввода входов в контроллере предупреждений в Ionic

Возможно ли изменение типа ввода в Alert Controller с помощью единственной кнопки внутри самой подсказки?

Проблема:

  1. Я хочу изменить пароль типа ввода в текст, когда пользователь нажимает кнопку «Просмотр пароля». Есть ли у вас какие-либо предложения по этому поводу?

Контроллер предупреждений

изменить код пароля (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();
  }//

Настоящая ошибка

Ошибка


firebase ionic-framework angular alert angularfire
person minalisa    schedule 11.03.2021    source источник
comment
что ты уже испробовал?   -  person E. Maggini    schedule 12.03.2021
comment
data.newPassword.type = 'text' выдает ошибку. Невозможно создать тип свойства для строки в контроллере предупреждений   -  person minalisa    schedule 12.03.2021
comment
Но когда вы нажимаете View Password, ваше оповещение автоматически закрывается. в этом случае вы можете попробовать PopoverController с пользовательским компонентом   -  person Ravi Ashara    schedule 12.03.2021
comment
Это полный код формы, сэр. Я поместил всю форму внутрь контроллера предупреждений.   -  person minalisa    schedule 13.03.2021

Ответы (1)


arrow_upward
0
arrow_downward

То, что вы просите, невозможно с AlertController. Это очень простой компонент, который возвращает вам только объект json, а не саму форму.

Для ваших целей вы должны сделать, как предложил Рави в комментариях, использовать 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>

После добавления к вашему основному коду (который не опубликован в вашем вопросе) вы сможете получить доступ к данным через объект всплывающего окна.

person E. Maggini    schedule 13.03.2021