Nativescript无法使用角度6获取Textfield元素的值

Question

NativeScript版本4.2.4 Angular版本6.0

我的登录页面中有两个文本字段

<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获取值。此外，我尝试使用双向数据绑定我的下面的代码，但它也无法正常工作。

这是我的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
    });
  }
}

Answer 1

您尚未发布您的User类，但看起来User对象及其属性中存在错误。尝试初始化此对象的空值。

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

Answer 2

由于您在模板上使用[(ngModel)]，因此当您使用user表格时，您将获得submit()对象中的字段值。

只需在Component中创建一个User：

user: User = {
  userName: '',
  password: '',
  confirmPassword: ''
};

submit() {
  console.log(this.user);
}

这是你的参考的Sample StackBlitz。不过NATIVESCRIPT。

Answer 3

login()函数是指this.password而不是this.user.password（这是模板所指的）

login() {
    ...
    this.alert("login: Password" + this.password)
    ...
}

我还在他的User中添加了像JakubP这样的answer类

export class User {
    userName: string;
    password: string;
}

这是一个工作的nativescript playground链接（所有代码都在HomeComponent中） - https://play.nativescript.org/?template=play-ng&id=YnvKpn&v=2

Answer 4

正如@JakubP所提到的，我认为你忘了导入NativeScriptFormsModule

在app.module.ts中添加

import { NativeScriptFormsModule } from "nativescript-angular/forms";

...

@NgModule({
  bootstrap: [AppComponent],
  imports: [NativeScriptModule, NativeScriptFormsModule, AppRoutingModule],
  declarations: [AppComponent],
  providers: [],
  schemas: [NO_ERRORS_SCHEMA]
})