Как передать данные реактивной формы между дочерними к родительским компонентам без использования сервисов

Question

Мы хотели бы использовать данные дочерней реактивной формы от родителя, когда мы нажимаем на родительскую кнопку.В настоящее время мы используем viewchild для получения ссылки на дочерний компонент.Мы получаем все статические данные, но не заполненные данные .......................................................................................................

parent.component.ts
@ViewChild(DetailsComponent) childrenComponent: childrenComponent;

save(){
let model=this.childrenComponent.buildDetailsModel();
/*here api to save model*/
}
children.component.ts
buildDetailsModel(): Details {
var a = {
  reportedToId: this.detailsForm.get('reportedTo').value,
  reportedOn: this.detailsForm.get('reportedTime').value,
  identifiedById: this.detailsForm.get('identifiedBy').value,
  identifiedOn: this.detailsForm.get('dateAndTimeIdentified').value,
  locationTypeId: this.detailsForm.get('locationType').value,
  addressId: this.detailsForm.get('locationAddress').value,
  AddressLine: this.detailsForm.get('locationOfAddress').value,
  description: this.detailsForm.get('description').value,
  PeopleExposed: this.dataSource
  };
  return a;
}

parent.html 
<child></child>

child.html
<form [formGroup]="detailsForm">
  <div fxLayout="column wrap" fxLayoutGap="12px">

    <div fxLayout="column" fxLayout.lt-sm="column" fxLayout.lt-md="column" 
   fxLayoutGap="24px">

      <div fxFlex="row" fxLayoutGap="24px" fxLayout.lt-md="column">
        <div fxFlex="column">
          <mat-form-field>
            <mat-label>Reported To</mat-label>
            <mat-select matInput formControlName="reportedTo">
              <mat-option value="Test 1">Test 1</mat-option>
              <mat-option value="Test 2">Test 1</mat-option>
            </mat-select>
          </mat-form-field>


          <mat-form-field>
            <input matInput [matDatepicker]="reportedTime" placeholder="Date 
          and time reported" date="true" time="true" 
          formControlName="reportedTime">
            <mat-datepicker-toggle matSuffix [for]="reportedTime"></mat- 
           datepicker-toggle>
            <mat-datepicker #reportedTime></mat-datepicker>
          </mat-form-field>

          <mat-form-field>
            <mat-label>Identified by</mat-label>
            <mat-select matInput formControlName="identifiedBy">
              <mat-option value="Test 1">Test 1</mat-option>
              <mat-option value="Test 2">Test 1</mat-option>
            </mat-select>
          </mat-form-field>
        </div>

Answer 1

Оберните вашу дочернюю форму внутри элемента формы, чтобы вы могли отправить свою дочернюю форму из родительского элемента, затем ввести Inject FormGroupDirective в дочерний компонент, чтобы получить ссылку на родительскую форму

<form (ngSubmit)="save()" [formGroup]="detailsForm"> 
    <app-child></app-child>
    <button type="button">Save</button>
 </form>

Затем использовать controlContainer для предоставления существующего FormGroupDirectiveв дочернем компоненте

childcomponent.ts

  form;
  constructor(private fb: FormBuilder, @Host() private parentFor: FormGroupDirective) { }

  ngOnInit() {
    this.form = this.parentFor.form;
    //Add FormControl as per your need
    this.form.addControl('child', this.fb.group({
      name: "",
      email: ""
    }))

  }

child.component.html

<form formGroupName="child">
  <input formControlName="name">
  <input formControlName="email">
</form>

Пример: https://stackblitz.com/edit/angular-xusdev

Answer 2

Если вы используете «referenceVariable», у вас есть доступ ко всем общедоступным переменным и функциям «child»

<button (click)="click(mychild)"></button>
<child #mychild></child>

click(mychild.any)
{
   console.log(mychild.detailsForm);
}

В любом случае, я думаю, что вы хотите, чтобы ребенок принадлежал к Form.Для этого вы можете использовать viewProviders у ребенка

viewProviders: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective
    }
  ]

Как это ссылка показать