Ionic3中的表单验证

Question

1. I had used angular form validation but It seems that it only works on HTML component and not for the ionic component.
2. I had tried "formControlName" but it could not work in <ion-input> & also not throw any error.

3. Here in the below code formControlName works fine with <textarea>

   my .ts file:

     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(); } 

In My .html File:

<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

After so much digging for this issue i had finally found the solution: Also problem is from <ion-input> core the disabled property is sticked to it whether, we're trying to enable back "enable" wont work. for that I am using this technique.

In .html file include:

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

In .ts file I wrote:

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");
     }

}