Question

我有一个名为＆＃34; ui-textbox＆＃34;的自定义输入组件，如果在单个表单中存在多个实例 - 在常规页面组件中 - 它们都会转到触摸我触摸它们中的任何一个，如果它们中的任何一个无效，则无效，但它们没有相同的名称。请注意，当我检查其父表单时，我看到表单控件具有正确的有效性，触摸状态，所以它只在输入元素上添加了不正确的ng-class！

TextBoxUI组件：

import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators, NgForm } from '@angular/forms';

@Component({
  selector: 'ui-textbox',
  templateUrl: './textBox.ui.html',
  styleUrls: ['./textBox.ui.css']
})
export class TextBoxUI implements OnInit {


  private control: FormControl = new FormControl(this.value, Validators.compose([]));;
  private _group: FormGroup;
  private _name: string;
  private _value: string = '';


  @Input()
  get value(): string {
    return this._value;
  }
  @Output() valueChange = new EventEmitter();
  set value(val) {
    if (this._value === val) return;

    this._value = val;
    this.valueChange.emit(val);

  }

  @Input()
  get name(): string {
    return this._name;
  }
  @Output() nameChange = new EventEmitter();
  set name(val) {
    if (this._name === val) return;
    this._name = val;
    this.nameChange.emit(val);
  }

  @Input()
  get group(): FormGroup {
    return this._group;
  }
  set group(val) {
    if (this._group === val) return;
    this._group = val;
    setTimeout(() => { this._group.addControl(this.name, this.control); }, 0);

  }

  constructor(private fb: FormBuilder) {

  }
  ngOnInit() {

    var arr = [];
    //.
    //.
    //some code
    arr.push(Validators.required);
    this.control.setValidators(arr);
    this.control.updateValueAndValidity();

  }

}

TextBoxUI模板：

<input [formControl]="control"
       [formGroup]="group"
       type="text"
       [(ngModel)]="value">

页面组件：

  import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
  import { FormControl, FormGroup, FormBuilder, Validators, NgForm } from '@angular/forms';

  @Component({
    selector: 'pageControls',
    templateUrl: './page.component.html',
    styleUrls: ['./page.component.css']
  })
  @HasibEvents()
  export class PageComponent implements OnInit {


    private mainForm: FormGroup;

    private textBoxName1: string = "textBox1";
    private textBoxValue1 = 3;

    private textBoxName2: string = "textBox2";
    private textBoxValue2 = 5;


    constructor(private fb: FormBuilder) {

    }

    ngOnInit(): void {
       this.mainForm = this.fb.group({
       });

    }

  }

网页模板：

<form [formGroup]="mainForm">
  <div class="row">
      <ui-textbox [(group)]="mainForm"
                  [(name)]="textBoxName1"
                  [(value)]="textBoxValue1"
                  ></ui-textbox>
    </div>

  <div class="row">
    <ui-textbox [(group)]="mainForm"
                [(name)]="textBoxName2"
                [(value)]="textBoxValue2"></ui-textbox>
  </div>
</form>

为什么会这样？

我错过了什么？我无法在代码中看到什么会使Angular将这两个输入一起触摸或无效。我搜索了很多关于这个问题但没有找到任何结果。

注意：只有当控件被表单标记包围时才会出现这个错误的ng-classes问题。

Answer 1

您不应该在已添加formGroup指令的元素上放置formControl指令。这种行为是不可能的。

因此，请从formGroup

中删除input control属性绑定

<input [formControl]="control" [formGroup]="group"
                               ^^^^^^^^^^^^^^^^^^

控件触摸状态在表单内部时会相互影响（Angular 5），为什么？

1 个答案: