Question

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

我尝试以下代码：

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

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

谢谢！

Answer 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

Answer 2

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

<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 3

如下更改代码。

<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 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

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

4 个答案: