使用 Nativescript 显示/隐藏密码文本答案

【问题标题】：show/hide password text using Nativescript使用 Nativescript 显示/隐藏密码文本
【发布时间】：2018-08-17 14:44:37
【问题描述】：

我想在我的登录表单中显示/隐藏密码文本。我有如下代码。

我试试这个代码：

    <GridLayout margin="10" verticalAlignment="center" backgroundColor="#ffffff">
        <StackLayout margin="10" verticalAlignment="center" [formGroup]="signUpForm" padding="15">
            <StackLayout class="input-field">
                <TextField formControlName="username" hint="Username"></TextField>
            </StackLayout>
            <StackLayout class="input-field">
                <TextField formControlName="password" hint="Password" secure="true">
                </TextField>
            </StackLayout>
            <Label text ="show/hide" (tap)="toggleShow()"></Label>
        </StackLayout>
   </GridLayout>

在component.ts中我写了这段代码：

export class LoginComponent implements OnInit {
    signUpForm: FormGroup;
    show = false;
    type=  'password';
    constructor(....) {
        this.signUpForm = this.formBuilder.group({
            username: ["", Validators.required],
            password: ["", Validators.required]
        });
    }
    toggleShow()
    {
        this.show = !this.show;
        if (this.show){
            this.type = "text";
        }
        else {
            this.type = "password";
        }
    }
}

当我在console.log(this.show) 中单击函数toggleShow() 时显示真假，但在模板中不显示任何内容。你能问我任何想法吗，我的代码有什么问题？

谢谢！

【问题讨论】：

标签： angular typescript nativescript show-hide angular2-nativescript

【解决方案1】：

编辑：SeanStanden 发布了一个更好的解决方案，这应该是公认的答案。

就个人而言，我更喜欢使用元素引用来更改 Textfield 上的 secure 属性：

.ts:

export class HomeComponent {
    @ViewChild('passwordField') passwordField: ElementRef;

    constructor() { }

    toggleShow() {
        console.log(this.passwordField.nativeElement.secure);
        this.passwordField.nativeElement.secure = !this.passwordField.nativeElement.secure;
    }
}

.html:

<GridLayout margin="10" verticalAlignment="center" backgroundColor="#ffffff">
    <StackLayout margin="10" verticalAlignment="center" padding="15">
        <StackLayout class="input-field">
            <TextField hint="Username"></TextField>
        </StackLayout>
        <StackLayout class="input-field">
            <TextField #passwordField hint="Password" secure="true">
            </TextField>
        </StackLayout>
        <Label text="show/hide" (tap)="toggleShow()"></Label>
    </StackLayout>
</GridLayout>

示例游乐场：https://play.nativescript.org/?template=play-ng&id=Xmy1Pv&v=3

【讨论】：

啊，是的，我刚刚在下面看到了您的解决方案。我同意，这是一个更优雅的解决方案。

【解决方案2】：

没有理由访问本机元素。您可以绑定到“安全”属性并切换例如：

<StackLayout class="input-field">
   <TextField formControlName="password" hint="Password" [secure]="securePassword">
   </TextField>
</StackLayout>
<Label text ="show/hide" (tap)="toggleShow()"></Label>

toggleShow() {
  this.securePassword = !this.securePassword;
}

【讨论】：

【解决方案3】：

如果有人正在寻找，则可以扩展 Sean 的答案，专门针对 NativeScript-Vue。

<TextField class="input" :text="password" :secure="securePassword" ></TextField>

<Label class="passmsg" :text="passmsg" @tap="toggleShow()"></Label>

在方法中：

toggleShow () {
  this.securePassword = !this.securePassword
  if (this.securePassword) this.passmsg = 'Show Password'
  else this.passmsg = 'Hide Password'
}

在您的数据部分添加passmsg

【讨论】：

【解决方案4】：

如下更改您的代码。

<StackLayout class="input-field">
    <TextField formControlName="password" [hint]="passwordType" secure="true"></TextField>
</StackLayout>

TS:-

passwordType: string = "password";
toggleShow()
    {
        this.passwordType = (this.passwordType == "password") ? "text" : "password";
    }

希望这会有所帮助。

【讨论】：