Wie Eingabewerte zu empfangen und print auf die Konsole?

verwenden Sie den form builder, erfahren Sie mehr über die Reaktiven Formen in Eckige 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);
  }

}

den Unterschied zwischen ngSubmit vs submit-Ereignis: https://blog.thoughtram.io/angular/2016/03/21/template-driven-forms-in-angular-2.html

Jedoch ngSubmit sichergestellt, dass das Formular nicht Einreichen, wenn die
handler wirft (das ist das default-Verhalten reichen) und
Ursachen eine tatsächliche http-post-request. Wir verwenden ngSubmit, anstatt, wie dies
die beste Praxis: