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

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 中的反应式表单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 与 submit 事件的区别：https://blog.thoughtram.io/angular/2016/03/21/template-driven-forms-in-angular-2.html

但是，ngSubmit 确保表单在 处理程序代码抛出（这是提交的默认行为）和 导致实际的 http post 请求。让我们使用 ngSubmit 来代替 是最佳做法：