Nativescript无法使用angular 6获取Textfield元素的值 [英] Nativescript unable to get values of Textfield element using angular 6

问题描述

NativeScript 4.2.4 版Angular 6.0 版

NativeScript version 4.2.4 Angular version 6.0

我的登录页面中有两个 TextFields

I have two TextFields in my login page

<StackLayout class="input-field">
  <TextField class="input" hint="Username" autocorrect="false" autocapitalizationType="none" [(ngModel)]="user.userName" returnKeyType="next" (returnPress)="focusPassword()"></TextField>
  <StackLayout class="hr-light"></StackLayout>
</StackLayout>

<StackLayout class="input-field">
  <TextField #password class="input" hint="Password" secure="true" [(ngModel)]="user.password" [returnKeyType]="isLoggingIn ? 'done' : 'next'" (returnPress)="focusConfirmPassword()"></TextField>
  <StackLayout class="hr-light"></StackLayout>
</StackLayout>

<StackLayout *ngIf="!isLoggingIn" class="input-field">
  <TextField #confirmPassword class="input" hint="Confirm password" secure="true" [(ngModel)]="user.confirmPassword" returnKeyType="done"></TextField>
  <StackLayout class="hr-light"></StackLayout>
</StackLayout>

<Button [text]="isLoggingIn ? 'Log In' : 'Sign Up'" (tap)="submit()" class="btn btn-primary m-t-20"></Button>

我想要的只是使用 ngModel 获取 TextField 值.但我不知道为什么我没有通过使用 user.userName 和 user.password 来获取值.此外，我使用两种方式数据绑定尝试我的以下代码，但它也不起作用.

All I want is to get TextField values using ngModel. But I don't know why I'm not getting the values by using user.userName and user.password. Also I try my below code using two way data-binding but it also not working.

这是我的 login.component.ts

Here is my login.component.ts

@Component({
  selector: "Login",
  moduleId: module.id,
  templateUrl: "./login.component.html",
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  isLoggingIn = true;
  user: User;
  @ViewChild("password") password: ElementRef;
  @ViewChild("confirmPassword") confirmPassword: ElementRef;

  constructor(private page: Page, private router: Router, private userService: UserService) {
    this.page.actionBarHidden = true;
    this.user = new User();
    // Use the component constructor to inject providers.
  }

  toggleForm() {
    this.isLoggingIn = !this.isLoggingIn;
  }

  submit() {
    if (this.isLoggingIn) {
      this.login();
    } else {
      // this.register();
    }
  }

  login() {
    this.alert("login: Username" + this.user.userName)
    this.alert("login: Password" + this.password)
    this.userService.login(this.user);
  }

  focusPassword() {
    this.password.nativeElement.focus();
  }

  focusConfirmPassword() {
    if (!this.isLoggingIn) {
      this.confirmPassword.nativeElement.focus();
    }
  }

  alert(message: string) {
    return alert({
      title: "Hashoo Says",
      okButtonText: "OK",
      message: message
    });
  }
}

推荐答案

您还没有发布您的 User 类，但看起来 User 对象及其属性有问题.尝试初始化此对象的空值.

You haven't posted your User class, but it looks like there is something wrong in the User object and its properties. Try to initialise empty values for this object.

export class User {
    userName = "";
    password = "";
}

这篇关于Nativescript无法使用angular 6获取Textfield元素的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！