CODEWITHSUNDEEP
htmlangulartypescript
Anuwat J. Boonlao
Anuwat J. Boonlao

Reputation: 43

Angular: cannot receive value from other component

I try to create reusable component for input form. The page will call this tag and get data to form group.

CALL PAGE: I want to call tag and get value into "test" which I create in FormGroup

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

HTML: I create form in this component 

<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: for sent data back

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" still got no value, how an I out the value that emitted back into "test"

Upvotes: 0

Views: 43

Answers (1)

monstertjie_za
monstertjie_za

Reputation: 7803

Currently, I do not see that you are subscribing to the data: EventEmitter anywhere?

If you declare an EventEmitter to transfer data between two components, the other component will need to subscribe() to the event to receive the data.

In your other components contructor, if you have an instance of your FormRowInputComponent component, you subscribe as follow:

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

Here is four different approaches of passing values between components

Upvotes: 1

Related Questions