代码之家 › 专栏 › 技术社区 › Ahmer Ali Ahsan

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

angular2-nativescript nativescript angular

Ahmer Ali Ahsan · 技术社区 · 6 年前

NativeScript版本4.2。4. 角度版本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>

这是我的登录名。组成部分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
    });
  }
}

4 回复 | 直到 6 年前

JakubP 6 年前

您尚未发布您的用户类,但看起来用户对象及其属性中有问题。尝试初始化此对象的空值。

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

SiddAjmera 6 年前

既然你在使用 [(ngModel)] 在模板上,您将在 user 当你 submit()

创建一个 User

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

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

这里有一个 Sample StackBlitz 给你的裁判。

William Juan 6 年前

这个 login() this.password 而不是 this.user.password (这是模板所指的内容)

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

我还添加了一个 User 像JakubP在他的演讲中提到的班级 answer

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

https://play.nativescript.org/?template=play-ng&id=YnvKpn&v=2

Feder Catalin 6 年前

正如@JakubP提到的,我认为您忘记了导入NativeScriptFormsModule

附加应用程序。单元ts

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

...

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