向父组件发送数据表单

Question

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

我的子组件.ts：

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

我的子组件.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>

这是父组件.html：

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

父组件.ts：

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

Answer 1

这个想法是在填写所有表格要求后，最后一个输入触发更改为发送消息给父

父组件

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
  }
}

子组件

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)
  }
}

Answer 2

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

在你的父组件中声明一个变量来保存你的子组件的引用。之后，您可以从父级操作和访问您的子组件 随时。

父 TS

@ViewChildren('child') childComponent: GeneraldataInfdComponent;

父 HTML

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