Question

我正在学习有角度的离子技术。

我创建了一个登录表单：

<form [formGroup]="login">
    <ion-item>
      <ion-label>
        <ion-icon android="android-contacts" name="contacts"></ion-icon>
      </ion-label>
      <ion-input type="text" value="" name="username" [formControlName]="'username'" ></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>
        <ion-icon android="android-unlock" md="md-unlock"></ion-icon>
      </ion-label>
      <ion-input type="password" value="" name="password" [formControlName]="'password'" placeholder="Password"></ion-input>
    </ion-item>
  </form>
  <button ion-button full (click)="onLoginClick()" [disabled]="login.valid" >LOGIN</button>

在这里，我声明了带有控件的表单组：

constructor(public fb: FormBuilder, public authService: ApiAuthProvider, public altCtrl: AlertController, public navCtrl: NavController, 

    public navParams: NavParams) {

    this.login = fb.group({
      username: new FormControl(['u', Validators.required]),
      password: new FormControl(['p', Validators.required])
    })
  }

ionic serve处没有错误，但是登录按钮没有显示出来，并且当我单击登录按钮时，无法读取我在用户名输入中输入的内容：

onLoginClick(){
    console.log(this.login['username']);
}

它始终显示undefined作为结果。

顺便说一句，使用纯Angular应用程序时，使用ionic中的表单生成器是一样的吗？

Answer 1

您必须访问表单控件值，例如

onLoginClick(){
    console.log(this.login.get('username').value);
}

并且您还尝试在表单有效时禁用它。您应该检查无效

<button ion-button full (click)="onLoginClick()" [disabled]="login.invalid" >LOGIN</button>

编辑：

以这种方式修改表单控制参数：您将它们作为数组传递。它们应该是两个单独的参数。

this.login = fb.group({
      username: new FormControl('u', Validators.required),
      password: new FormControl('p', Validators.required)
})

如果您有多个验证器（如

），则可以添加验证器数组

new FormControl('u', [Validators.required, Validators.maxlength])

Answer 2

您可以使用来获取表格的值

this.login.value;

如果您在html中使用它，请这样做。

{{login.value | json}}

或者您可以使用\

获得特定控件的值

this.login.get('controlName).value;

Ionic And Angular 5表单构建器和组未读取值

2 个答案: