Wie kann man Eingabewerte abrufen und auf der Konsole drucken?

Question

Ich möchte in der console.log die Werte für den eingegebenen Benutzernamen und das eingegebene Passwort drucken. Siehe mein Formular:

<form> 
    <ion-list> 

     <ion-item> 
      <ion-label fixed>Username</ion-label> 
      <ion-input type="text"></ion-input> 
     </ion-item> 

     <ion-item> 
      <ion-label fixed>Password</ion-label> 
      <ion-input type="password"></ion-input> 
     </ion-item>  

     <button ion-button color="secondary" clear full style="font-style: bold; text-align: center;">Forgot Password?</button> 

     <button ion-button color="secondary" type="submit" full>Login</button> 

    </ion-list> 
</form> 

Wie Eingangs- und Druckwerte in der Konsole als nächstes auf den Login-Button klicken?

Answer 1

Verwendung Formular-Builder, erfahren Sie mehr über Reactive Forms in Angular https://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html

<form [formGroup]="formVar" (ngSubmit)="onSubmit()"> 
    <ion-list> 

     <ion-item> 
      <ion-label fixed>Username</ion-label> 
      <ion-input type="text" formControlName="username"></ion-input> 
     </ion-item> 

     <ion-item> 
      <ion-label fixed>Password</ion-label> 
      <ion-input type="password" formControlName="password"></ion-input> 
     </ion-item>  

     <button ion-button color="secondary" clear full style="font-style: bold; text-align: center;">Forgot Password?</button> 

     <button ion-button color="secondary" type="submit" full>Login</button> 

    </ion-list> 
</form> 

.ts Datei

export class FormComponent implements OnInit { 
    formVar: FormGroup; 
    constructor(private fb: FormBuilder) {} 

    ngOnInit() { 
    this.formVar = this.fb.group({ 
     username: '', 
     password: '' 
    }); 

    } 
    onSubmit() { 
    console.log(this.formVar.value); 
    } 

} 

die Differenz zwischen ngSubmit vs einreichen Ereignis: https://blog.thoughtram.io/angular/2016/03/21/template-driven-forms-in-angular-2.html

Howeve r, ngSubmit stellt sicher, dass das Formular nicht gesendet wird, wenn der Handlercode auslöst (was das Standardverhalten von submit ist) und eine tatsächliche http-Postanforderung verursacht. Lasst uns ngSubmit verwenden, anstatt wie diese ist die beste Praxis:

Answer 2

eine ng-click auf die Schaltfläche Hinzufügen

<button ion-button color="secondary" ng-click="submit()" type="submit" full>Login</button> 

In Controller:

$scope.submit = function() 
{ 
    console.log($scope.username); 
    console.log($scope.password); 
} 

Make sure Sie die ng-model für die Eingabefelder und ng-controller für das Formular hinzugefügt haben,

<ion-item> 
    <ion-label fixed>Username</ion-label> 
    <ion-input ng-model="username" type="text"></ion-input> 
</ion-item> 
<ion-item> 
    <ion-label fixed>Password</ion-label> 
    <ion-input ng-model="password" type="password"></ion-input> 
</ion-item>