时间戳

首页 > 解决方案 > 反应形式 - 输入字段自动聚焦 - Angular

angular - 反应形式 - 输入字段自动聚焦 - Angular

问题描述

我有奇怪的问题。演示

.ts

import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      'options': this.formBuilder.array([this.createOption()])
    });

  }

  createOption(): FormGroup {
    return this.formBuilder.group({
      'name': [null]
    });
  }
}

.html

<form novalidate [formGroup]="myForm" >
    <div formArrayName="options" class="mt-3">
          <div [formGroupName]="i" *ngFor="let option of myForm.get('options').value; let i = index;">
<input id="{{'name' + i}}" autocomplete="off" type="text" class="form-control" aria-label="Name"
                    formControlName="name">
          </div>
    </div>
</form>

我有一个包含多个选项name字段的表单。在 html 中，我有每个选项的循环来显示字段。现在，如果我在输入字段中输入任何字符，它会自动聚焦在该字段之外。

如果我*ngFor="let option of myForm.get('options').value; let i = index;"改为*ngFor="let option of myForm.get('options').controls; let i = index;"- 它可以解决问题。

但是，如果我尝试将其部署到生产环境中并运行

ng build --prod

它给出了错误Property 'controls' does not exist on type 'AbstractControl'.

在这方面需要帮助。

标签： angularangular6angular-reactive-forms

解决方案

而不是循环，myForm.get('options').value你应该循环myForm.get('options').controls

这应该可以解决问题：

<form novalidate [formGroup]="myForm" > <div formArrayName="options" class="mt-3"> <div [formGroupName]="i" *ngFor="let option of myForm.get('options').controls; let i = index;"> <input id="{{'name' + i}}" autocomplete="off" type="text" class="form-control" aria-label="Name" formControlName="name"> </div> </div> </form>

推荐阅读