CODEWITHSUNDEEP
angularnativescriptangular2-nativescript
Ahmer Ali Ahsan
Ahmer Ali Ahsan

Reputation: 6136

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

enter image description here

Upvotes: 1

Views: 1593

Answers (4)

Feder Catalin
Feder Catalin

Reputation: 163

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

Upvotes: 1

William Juan
William Juan

Reputation: 1415

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

Upvotes: 0

SiddAjmera
SiddAjmera

Reputation: 39432

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.

Upvotes: 0

JakubP
JakubP

Reputation: 86

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

Upvotes: 2

Related Questions