Question

我有一个奇怪的问题。 Demo

.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'.

需要帮助。

Answer 1

您无需在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>

反应形式-输入字段自动聚焦-角度

1 个答案: