反应式表单 - 输入字段自动聚焦 - Angular [英] Reactive Form - Input field focus out automatically - Angular

问题描述

我遇到了奇怪的问题.演示

.ts

import { Component } from '@angular/core';从 '@angular/forms' 导入 { FormGroup, FormBuilder };@成分({选择器:'我的应用'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent {我的表格:表格组；构造函数(私有 formBuilder:FormBuilder){}ngOnInit() {this.myForm = this.formBuilder.group({'选项':this.formBuilder.array([this.createOption()])});}createOption(): FormGroup {返回 this.formBuilder.group({'姓名':[空]});}}

.html

</表单>

我有一个表单，其中包含多个选项的 name 字段.在 html 中，我有每个选项的循环来显示字段.现在，如果我在输入字段中输入任何字符，它会自动将焦点移出该字段.

如果我将 *ngFor="let option of myForm.get('options').value; let i = index;" 更改为 *ngFor="let option of myForm.get('options').value; let i = index;".get('options').controls; let i = index;" - 它解决了这个问题.

但是如果我尝试在生产环境中部署它并且我运行

ng build --prod

它给出错误属性控件"在类型AbstractControl"上不存在.

需要这方面的帮助.

解决方案

不是循环 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">

I am having strange issue. 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>

I have a form which has multiple options' name field. In html I have loop for each options to show fields. Now if I enter any character in the input field, it automatically focus out of the field.

If I change *ngFor="let option of myForm.get('options').value; let i = index;" to *ngFor="let option of myForm.get('options').controls; let i = index;" - it solves the issue.

But if I try to deploy it on production and I run

ng build --prod

It gives error Property 'controls' does not exist on type 'AbstractControl'.

Need help on this.

解决方案

Instead of looping over myForm.get('options').value you shuold loop over myForm.get('options').controls

This should do the trick:

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

这篇关于反应式表单 - 输入字段自动聚焦 - Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！