Angular2 Form Input - Cannot fill in text

Question

I created a component which is generating a form according to the current page:

<div *ngIf="checkCurrentDetails() == 'Dimension'" >

<form [formGroup]="form">
<div formGroupName="name">
  <input formControlName="first" placeholder="First">
  <input formControlName="last" placeholder="Last">
</div>
<input formControlName="email" placeholder="Email">
<button>Submit</button>
</form>
<p>Value: {{ form.value | json }}</p>
<p>Validation status: {{ form.status }}</p>


</div>
<div *ngIf="checkCurrentDetails() == 'Dimension Attributes'" >

 <form [formGroup]="form">
  <div formGroupName="name">
  <input class="search" formControlName="first" placeholder="First">
  <input formControlName="last" placeholder="Last">
 </div>
 <input formControlName="email" placeholder="Email">
 <button>Submit</button>
 </form>
 <p>Value: {{ form.value | json }}</p>
 <p>Validation status: {{ form.status }}</p>

 </div>

With this test method:

    checkCurrentDetails(){
        if(this.currentDetails['site'] == 'Dimension Attributes'){
           this.form = this.fb.group({
               name: this.fb.group({
                  first: ['Nancy', Validators.minLength(2)],
                last: 'Drew',
            }),
            email: '',
        });
        return this.currentDetails['site'];
    }
    if(this.currentDetails['site'] == 'Dimension'){
        this.form = this.fb.group({
            name: this.fb.group({
                first: ['Nanci', Validators.minLength(2)],
                last: 'Drew',
            }),
            email: '',
        });
        return this.currentDetails['site'];
    }
}

it is generating the form according to the site very well and it is producing this form:

http://www.pic-upload.de/view-32540301/test.jpg.html

In the textboxes youll be able to see the predefined test content. For example first textbox :"Nanci" etc. But now to my problem. I am not able to type in ,change or insert text to these textboxes. It seems like something is blocking it.

So I tried another thing to test if it has something to do with the form. I created a textbox

<input type='text'>

outside the form, which is working well. I am able to input text to this box but not to the textboxes inside the form and I don't know why?

Could you expand on "not able to input or change the text of these forms"? Can you not type into the controls in the browser? Does your subscription to valueChanges not get triggered? — jonrsharpe
– jonrsharpe, Commented Jan 22, 2017 at 22:59
You mean that you can enter in textboxes or you dont see entered data in form Object? — Vova Bilyachat
– Vova Bilyachat, Commented Jan 22, 2017 at 23:00
I am not able to type in text in the texboxes. It seems like something is blocking the input of the form. Btw, I am able to type text to a textbox which is not connected to the form. — 3HMonkey
– 3HMonkey, Commented Jan 22, 2017 at 23:02

Santanu Biswas · Accepted Answer · 2017-01-23 11:02:07Z

1

The problem is in <div *ngIf="checkCurrentDetails() == 'Dimension Attributes'">.

When you type in the textbox, ChangeDetection will run and the template is re-evaluated. As a result each time you type in the textbox, the checkCurrentDetails() function is getting called and the form is getting re-created/rendered! Therefore you see the initial state of the form again and again and get a feeling that the typing is being blocked.

Simply change it to

<div *ngIf="currentDetails.site == 'Dimension Attributes'"> and it works!

Here is the Plunker link for working sample: http://plnkr.co/edit/psjqZZvfx7GyOVAgkSJj?p=preview

answered Jan 23, 2017 at 11:02

Santanu Biswas

4,7872 gold badges25 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

3HMonkey Over a year ago

Hello Sir and thank you for the response. This is working, but not the solution of the problem. I want to explain this. This is a details pannel, so I want to render a form according to the site title which is changing by : constructor(_globalService: GlobalService,private fb: FormBuilder) { this.currentDetails = _globalService.currentTitle; this.subscription = _globalService.nameChange.subscribe((value) => { this.currentDetails = JSON.parse(value); });

3HMonkey Over a year ago

For example: We have site1, site2, site3. Inside the main component is a detailspannel.component.A global service is changing the title of the site. I want to change the form inside the details pannel according to the site title. If it is site1 the form is rendered with 3 fields.. If its site2, lets say I need 10 fields etc.

Santanu Biswas Over a year ago

In that case, you have to execute the logic for deciding the form type in the component code. You can put that in single variable. and use that variable with *ngIf or *ngSwitch to render the appropriate form. If you call the function itself in *ngIf, the change detection of Angular2 will execute it each time there is a change in your current form. Hope you understand now.

Santanu Biswas Over a year ago

Subscribe to the global service, and whenever you receive a change in subscribed value, execute the logic to find which form is to be displayed and save that in a variable. On yout HTML template, use that value with *ngIf* to display the appropriate form.

Collectives™ on Stack Overflow

Angular2 Form Input - Cannot fill in text

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related