Question

我尝试为输入表单创建可重用的组件。该页面将调用此标记并获取数据以形成组。

CALL PAGE：我想调用tag并将值赋入我在FormGroup中创建的“test”

<div class="row">
   <proj-form-row-input [lable]="'Input 1'" [required]="true" formControlName="test"></proj-form-row-input>
</div>

HTML：我在此组件中创建表单

<div class="col-sm-6 col-xs-12">
  <form [formGroup]="setupForm" class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-5">
        {{lable}}
        <span *ngIf="required" class="required">*</span>
      </label>
      <div class="col-sm-7">
        <input type="text" class="form-control" formControlName="data" />
      </div>
    </div>
  </form>
</div>

TS：用于发回数据

import { Component, OnInit, Input, forwardRef, Output, EventEmitter } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor, FormGroup, FormBuilder } from '@angular/forms';
import { ValidateHelper } from '../../helper/validate-helper';

@Component({
  selector: 'proj-form-row-input',
  templateUrl: './form-row-input.component.html',
  styleUrls: ['./form-row-input.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => FormRowInputComponent),
      multi: true
    }
  ]
})
export class FormRowInputComponent implements OnInit, ControlValueAccessor {

  @Input() public lable: string;
  @Input() public required: boolean = false;

  @Output() public data = new EventEmitter();

  public setupForm: FormGroup;
  public inputData: string;

  constructor(
    private fb: FormBuilder,
  ) { }

  ngOnInit() {
    this.initsetupForm();
  }

  writeValue(obj: string): void {
    if (ValidateHelper.isNotEqualString(obj, this.inputData)) {
      this.setInputData();
    } else {
      this.data.emit(obj);
    }
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState?(isDisabled: boolean): void {
  }

  private initsetupForm(): void {
    this.setupForm = this.fb.group({
      data: [''],
    });

    this.setupForm.controls['data'].valueChanges.subscribe((val) => {
      this.writeValue(val);
    });
  }

  private setInputData() {
    this.inputData = this.setupForm.controls['data'].value;
    this.data.emit(this.inputData);
  }

  private onChange(_: any) { }
  private onTouched() { }

}

FormControlName“test”仍然没有得到任何价值，我如何将发出的值反馈回“test”

Answer 1

目前，我没有看到您在任何地方订阅data: EventEmitter？

如果您声明EventEmitter在两个组件之间传输数据，则另一个组件需要subscribe()该事件才能接收数据。

在您的其他组件构造函数中，如果您有FormRowInputComponent组件的实例，则订阅如下：

formRowInputInstance.data.subscribe(response => { this.someProperty = response });

Here是在组件之间传递值的四种不同方法

Angular：无法从其他组件

1 个答案: