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

中的Reactive Forms的更多信息

<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发布请求。让我们使用ngSubmit作为这个是最好的做法：

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

1 个答案: