向 parent 组件发送数据表单

Question

我有一个包含表单的 child 组件和一个包含保存按钮的 parent 组件！所以我想将我的 child 组件中的表单发送到 parent 组件。问题是我的 child 组件中没有提交按钮。所以我不知道如何发送这个表格。

我的 child component.ts :

 generalDataForm = new FormGroup({
occurenceDate: new FormControl('', Validators.required),
mainCause: new FormControl('', Validators.required),
ageBuilding: new FormControl('', Validators.required)
 })

我的 child component.html :

 <form class="k-form k-form-inline" style="padding-top:4px; " [formGroup]="generalDataForm" ">

<div class="row">
  <div class="col-md-4 no-padding-left">
    <div style="padding-top: 10px;">
      <span style="font-size: small;">Date</span>
      <kendo-datepicker [max]="max" formControlName="occurenceDate" [format]="'dd/MM/y'"
        placeholder="DD/MM/YYYY"></kendo-datepicker>
    </div>
  </div>
  <div class="col-md-4" style="padding-top: 10px;">
    <span style="font-size: small ;">age</span>
    <div class="row" style="padding-top: 11px; padding-left: 15px;">
      <input type="radio" id="inftwoyears" value="inftwoyears" [formControlName]="'ageBuilding'"
        kendoRadioButton />
      <label class="k-checkbox-label" for="inftwoyears"
        style="padding-left: 10px; padding-right: 10px;">2</label>

      <input type="radio" id="suptwoyears" value="suptwoyears" [formControlName]="'ageBuilding'"
        kendoRadioButton />
      <label class="k-checkbox-label" for="suptwoyears"
        style="padding-left: 10px;">5</label>
    </div>
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-4 no-padding-left">
    <span>cause </span>
  </div>
</div>
<div class="row">
  <div class="col-md-4 no-padding-left">

    <kendo-combobox [data]="mainCauselist" class="form-control" formControlName="mainCause"
      >
    </kendo-combobox>
  </div>
</div>

这是 parent component.html :

 <div class="" style="margin:0;">
          <app-generaldata-info></app-generaldata-info>
  </div>
  <button (click)="saveAndGoForUpload()" type="button"
        [disabled]=""
        class="btn">save</button>

parent component.ts :

saveAndGoForUpload() { this.router.navigate(['dashboard/uploadFiles'])}

Answer 1

您可以随时使用 template reference variables 访问您的 child 组件拥有的数据。

在您的 parent 组件中声明一个变量，该变量将保存您的 child 组件的引用。之后，您可以从 parent 操作和访问 child 组件随时。

Parent TS

@ViewChildren('child') childComponent: GeneraldataInfdComponent;

Parent HTML

 <app-generaldata-info #child></app-generaldata-info>

Answer 2

这个想法是在填写完所有需要的表格后，最后一次输入触发更改为发送消息到 parent

parent 分量

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  constructor() { }

  message:string;

  receiveMessage($event) {
    this.message = $event
  }
}

child 分量

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
      <form ...
        on last child you may trigger
        <input type="text" (change)="toParent()" >
      </form>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
   message = this.formBuilder.group({
      ...
    });
  @Output() messageEvent = new EventEmitter<string>();

  constructor(private formBuilder: FormBuilder) { }

  toParent() {
    this.messageEvent.emit(this.message)
  }
}

向 parent 组件发送数据表单

Send a data form to the parent component

angular

angular-reactive-forms