Nativescript unable to get values of Textfield element using angular 6

问题

NativeScript version 4.2.4 Angular version 6.0

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>

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.

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

回答1:

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 = "";
}

回答2:

Since you're using [(ngModel)] on the template, you will get the field values in the user Object when you submit() your form.

Just create a User in your Component:

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

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

Here's a Sample StackBlitz for your Ref. NOT IN NATIVESCRIPT though.

回答3:

The login() function refers to this.password instead of this.user.password (which is what the template refers to)

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

I also added a User class like JakubP mentioned in his answer

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

Here is a working nativescript playground link (all the code is in HomeComponent) - https://play.nativescript.org/?template=play-ng&id=YnvKpn&v=2

回答4:

As @JakubP mentioned I think that you forget to import NativeScriptFormsModule

add in app.module.ts

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

...

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

来源：https://stackoverflow.com/questions/52665730/nativescript-unable-to-get-values-of-textfield-element-using-angular-6