show/hide 使用 Nativescript 的密码文本

Question

我想 show/hidden 在我的登录表单中输入密码文本。我有如下代码。

我试试这个代码：

    <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() 时显示 true false，但在模板中没有显示任何内容。你能问我任何想法吗，我的代码有什么问题？

谢谢！

Answer 1

如下更改您的代码。

<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";
    }

希望对您有所帮助。

Answer 2

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

就我个人而言，我更愿意使用元素引用来更改文本字段上的 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

Answer 3

没有理由访问原生元素。您可以绑定到 'secure' 属性并切换，例如：

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

TS

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

Answer 4

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

show/hide 使用 Nativescript 的密码文本

show/hide password text using Nativescript

show-hide

typescript

nativescript

angular2-nativescript

angular