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

Question

我想在控制台中打印.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);
  }
}

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

但是，ngSubmit 可确保在 处理程序代码抛出(这是提交的默认行为(和 导致实际的 HTTP 发布请求。让我们使用 ngSubmit 代替，因为这样 是最佳做法：