Question

我曾经使用过角形式验证，但它似乎只能起作用在HTML组件而不是离子组件。
我曾尝试过“formControlName”，但无法正常工作在<ion-input>＆amp;也不会抛出任何错误。

在下面的代码中，formControlName可以正常使用<textarea>

我的.ts文件：

 constructor(private formBuilder: FormBuilder) 
 {
  this.userForm = this.formBuilder.group({ 
      'name': ['', Validators.required],
      'email': ['', Validators.required],
      'profile': ['', Validators.required]
  });

  this.userForm.get('name').disable();
  this.userForm.get('email').disable();
  this.userForm.get('profile').disable();
}


edit()
{
  this.userForm.get('name').enable();
  this.userForm.get('email').enable();
  this.userForm.get('profile').enable();
}

在我的.html文件中：

<form [formGroup]="userForm" (submit)="saveUser()">
  <ion-label>Name</label>
  <ion-input formControlName="name" id="name"></ion-input>


  <ion-label>Email</label>
  <ion-input formControlName="email" id="email"></ion-input>

  <label for="profile">Profile Description</label>
  <textarea formControlName="profile" id="profile"></textarea>

  <button type="submit" [disabled]="!userForm.valid">Submit</button>
</form>

<button round ion-button (click)="edit()">Edit</button>

Answer 1

经过这么多挖掘这个问题后，我终于找到了解决方案：问题还在于来自<ion-input>核心的已禁用的属性，无论我们是否正在尝试启用＆＃34;启用＆＃34; 无法正常工作。因为我正在使用这种技术。

在.html文件中包含：

<div id="tag">....stuff provided question .html file.....</div>

在.ts文件中我写道：

edit()
{
   this.userForm.get('name').enable();
   this.userForm.get('email').enable();
   this.userForm.get('profile').enable();

   let field = document.getElementById("tag");
   let children = field.getElementsByTagName("input");

    for(var i=0;i<children.length;i++)
     {
      children[i].removeAttribute("disabled");
     }

}

Ionic3中的表单验证

1 个答案: