Nativescript не может получить значения элемента Textfield, используя угловой 6 - PullRequest
Новая
       11

Nativescript не может получить значения элемента Textfield, используя угловой 6

0 голосов
/ 05 октября 2018

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>

Все, что я хочу - это получить значения TextField с помощью ngModel.Но я не знаю, почему я не получаю значения, используя 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
    });
  }
}

enter image description here

Ответы [ 4 ]

0 голосов
/ 05 марта 2019

Как уже упоминалось @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]
})
0 голосов
/ 05 октября 2018

Поскольку вы используете [(ngModel)] в шаблоне, вы получите значения полей в user объекте, когда вы submit() заполните свою форму.

Просто создайте User в своем компоненте: 

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

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

Вот Образец StackBlitz для вашей ссылки. НЕ В НАТИВЕСКРИПТЕ хотя.

0 голосов
/ 24 октября 2018

Функция login() относится к this.password вместо this.user.password (к чему относится шаблон) 

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

Я также добавил класс User, такой как JakubP, упомянутый в его ответ 

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

Вот ссылка на рабочую площадку для нативного сценария (весь код находится в HomeComponent) - https://play.nativescript.org/?template=play-ng&id=YnvKpn&v=2

0 голосов
/ 05 октября 2018

Вы не опубликовали свой класс User, но, похоже, что-то не так в объекте User и его свойствах.Попробуйте инициализировать пустые значения для этого объекта. 

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