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

Posted 2023-03-15

【中文标题】Ionic And Angular 5 表单构建器和组不读取值

【英文标题】：Ionic And Angular 5 form builders and groups is not reading values

【发布时间】：2018-07-11 07:14:55

【问题描述】：

我正在学习 ionic 和 angular。

我创建了一个登录表单：

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

顺便说一句，在 ionic 中使用表单构建器与使用纯 Angular 应用程序时相同吗？

【参考方案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])

【讨论】：

但是如果您在声明中注意到我将用户名输入设置为显示u，但它没有显示在表单上。

我修复了按钮验证，但仍然无法正常工作。因此，如果我在 2 个输入中输入，该按钮将保持禁用状态

现在工作正常，除了 u 没有显示在文本框内

except of u is not showing inside the textbox 是什么意思？您是否根据更新的答案修改了表单控件参数？

这里new FormControl('u', Validators.required)，u 没有显示在输入中

【参考方案2】：

您可以使用获取表单的值

this.login.value;

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

login.value | json

或者您可以使用 \

获取特定控件的值

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

【讨论】：

我修复了按钮验证，但仍然无法正常工作。因此，如果我在 2 个输入中输入，该按钮将保持禁用状态

你能在提交方法中添加一个console.log(this.login.errors) 并给我输出吗？