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

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

  •  0
  • 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
        });
      }
    }
    

    enter image description here

    4 回复  |  直到 6 年前
        1
  •  2
  •   JakubP    6 年前

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

    export class User {
        userName = "";
        password = "";
    }
    
        2
  •  0
  •   SiddAjmera    6 年前

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

    创建一个 User

    user: User = {
      userName: '',
      password: '',
      confirmPassword: ''
    };
    
    submit() {
      console.log(this.user);
    }
    

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

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

        4
  •  0
  •   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]
    })