Как сфокусировать поле ввода, созданное динамически, используя форму, управляемую угловой моделью - PullRequest
Новая
       34

Как сфокусировать поле ввода, созданное динамически, используя форму, управляемую угловой моделью

0 голосов
/ 12 ноября 2018

Я использую управляемые моделями формы в приложении Angular 7, и одно из них позволяет пользователю динамически добавлять / удалять группы полей. Вот наглядное представление о том, что я имею в виду:

enter image description here

Это FormModel, который я использую: 

this.formModel = new FormGroup( {
    id : new FormControl(''),   
    name : new FormControl('', Validators.required), 
    comment : new FormControl(''),
    options : new FormControl(3), 
    domain_users: new FormArray([this.createDomainUser()])
    });

Динамическое свойство: domain_users, то есть FormArray из FormGroup с 3 FormControl (домен, имя пользователя и пароль). Когда пользователь нажимает кнопку добавления, я делаю вот что: 

let du = this.formModel.get('domain_users') as FormArray;

if(nodes) {
  nodes.push(this.createDomainUser());
}

Мне бы хотелось, чтобы, когда пользователь нажимал кнопку добавления, фокус перемещался в поле «домен» вновь созданной строки. Каков был бы хороший «угловой» способ сделать это?

Заранее спасибо,

1 Ответ

0 голосов
/ 12 ноября 2018

Вот решение, которое я нашел:

В шаблоне HTML: 

<div class="ui-grid-row"
   *ngFor="let node of getDomainUsers().controls; let i = index" 
   [formGroupName]="i"
   #nodeInput>

В источнике компонента: 

@ViewChildren('nodeInput') nodeInputs: QueryList<ElementRef>;

[...]
nodeAdd() {
  [...]

  try {
    // Try to get the first input element of the last row added
    let lastInput: HTMLInputElement = this.nodeInputs.last.nativeElement.children[0].children[0];

    lastInput.focus();
  }
  catch(e) {
    // Couldn't access the input element
  }  
}
...