如何检索输入值并打印到控制台？

Question

我想在console.log中打印引用输入用户名和输入密码的值.看我的表格:

<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>

如何在单击登录按钮后在控制台中检索输入和打印值？

Answer 1

使用表单构建器,在Angular中了解有关Reactive Forms的更多信息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文件

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

}

ngSubmit与提交事件的区别:https://blog.thoughtram.io/angular/2016/03/21/template-driven-forms-in-angular-2.html

但是,ngSubmit确保在处理程序代码抛出时(这是提交的默认行为)不会提交表单,并导致实际的http post请求.让我们使用ngSubmit,因为这是最好的做法: