Angular forms add input field on click

Question

I want to add new input field on click but to select the text on the previous input field so that it will be edited.

When I click on field (Add Workstation) I want to select the previous field with (Unnamed workstation) and the Add workstation to be always visible and below. I have been trying to find a way to achieve this but with no luck until now.

html:

<div class="_form-item" *ngIf="item.type=='station'&& item.id" style="padding-top: 32px">
  <div class="_label">Work Stations</div>
  <div class="_ml-12 _pt-8 _flex-row" *ngFor="let work_station of item.children; let i = index;
                trackBy: customTrackBy">
    <input [id]="i" (ngModelChange)="updateWorkStation(i)"
           [(ngModel)]="item.children[i].name"
           type="text"/>
    <div class="_icon-button" (click)="removeWorkStation(i)"><i
      class="material-icons md-dark md-18">clear</i>
    </div>
  </div>
  <div class="_ml-12 _pt-8 _flex-row">
    <input (click)="createWorkStation()" placeholder="Add work station" [(ngModel)]="newWorkStation"
           type="text"/>
    <!--div class="_link-button">Add</div-->
  </div>
</div>

component function:

createWorkStation() {
    let item = new Location();
    item.type = 'work_station';
    item.name = 'Unnamed work station ';
    item.parent = this.item.group_id;
    this.service.create(item)
    .map((response: Response) => <Location>response.json())
    .takeWhile(() => this.alive)
    .subscribe(
        data => {
            this.onCreateChild.emit({id: data.id});
        },
        err => {
            console.log(err);
        }
    );
}

Please add a Minimal, Complete, and Verifiable example of your code. See also stackoverflow.com/help/mcve. If you're not able to add it, please add a starting point in code. — Roy
– Roy, Commented Sep 30, 2018 at 12:27
I do not understand at all your question. So you want a second input field under the first one if you click on 'Add work station'? If so, you can just add a new Entity in the list item.children you display in createWorkStation. The View will update itself. — kedenk
– kedenk, Commented Sep 30, 2018 at 13:10
@kedenk When I click Add work station field I want this field to move down and add a new field above it with a default value but the value selected and ready to be edited. The problem is when I click the Add work station field I cannot automatically focus and select the above newly added field. — Agon Cecelia
– Agon Cecelia, Commented Sep 30, 2018 at 13:30

kedenk · Accepted Answer · 2018-10-01 11:16:09Z

1

You can append to every input field a template variable (#test):

<input #test [id]="i" (ngModelChange)="updateWorkStation(i)"
       [(ngModel)]="item.children[i].name"
       type="text"/>

With this template variable, you can use ViewChildren and its change Observable to track if a new input field is added to the view:

@ViewChildren('test') el: QueryList<ElementRef>;

However, subscribing to the change Observable must be done in ngAfterViewInit

  ngAfterViewInit() {
      this.el.changes.subscribe( next => {
          setTimeout(() => this.elementFocus());
      });
  }

  elementFocus() {
      if( this.el != undefined && this.el.last != undefined ) {
          this.el.last.nativeElement.focus();
          this.el.last.nativeElement.select();
     }
  }

Here is a working example for you

answered Oct 1, 2018 at 11:16

kedenk

6696 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Angular forms add input field on click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related