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

Question

NativeScript版本4.2.4 Angular 6.0版

我的登录页面上有两个TextFields

<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

由于您在模板上使用appName.controller('uController', function ($scope,ConsoleService) { $scope.values = []; $scope.showPushData = function(){ $scope.date = new Date(); console.log($scope.date); $scope.year = $scope.date.getFullYear(); console.log($scope.year); $scope.time = $scope.date.getTime(); console.log($scope.time); var value = {"year": $scope.year,"time": $scope.time}; $scope.values = ConsoleService.getInfo(value); } }); appName.service('ConsoleService', function ($http) { this.consoleList = []; this.getInfo = function(values) { consoleList.push(values); return consoleList; } });，因此[(ngModel)]表单时将在user对象中获得字段值。

只需在您的组件中创建一个submit()：

User

以下是您的推荐人的Sample StackBlitz。但是，不能直接使用。

Answer 3

login()函数引用的是this.password，而不是this.user.password（模板所引用的）

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

我还添加了一个User类，如他的answer中提到的JakubP

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

这是一个有效的nativescript游乐场链接（所有代码都在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]
})