如何使用当前的Form API将父组件的FormGroup传递给其子组件

3 回答

• 0

  在父组件中执行此操作

  <div [formGroup]="form">
    <div>Your parent controls here</div>
    <your-child-component [FormGroup]="form"></your-child-component>
  </div>
  

  然后在您的子组件中，您可以像这样获得该引用...

  export class YourChildComponent implements OnInit {
    public form: FormGroup;
  
    // Let Angular inject the control container
    constructor(private controlContainer: ControlContainer) { }
  
    ngOnInit() {
      // Set our form property to the parent control
      // (i.e. FormGroup) that was passed to us, so that our
      // view can data bind to it
      this.form = <FormGroup>this.controlContainer.control;
    }
  }
  

  您甚至可以通过更改其选择器来确保在组件上指定 formGroupName 或 [formGroup] .

  selector: '[formGroup] epimss-error-messages,[formGroupName] epimss-error-messages'
  

  这个答案应该足以满足您的需求，但如果您想了解更多，我在这里写了一篇博客文章

  https://mrpmorris.blogspot.co.uk/2017/08/angular-composite-controls-formgroup-formgroupname-reactiveforms.html

  回复于 2024-04-20T19:53:08+08:00
• 12

  这是父formGroup中使用的子组件的示例：子组件ts：

  import { Component, OnInit, Input } from '@angular/core';
  import { FormGroup, ControlContainer, FormControl } from '@angular/forms';
  
  
  @Component({
    selector: 'app-date-picker',
    template: `
    <mat-form-field [formGroup]="form" style="width:100%;">
    <input matInput [matDatepicker]="picker" [placeholder]="placeHolder" [formControl]="control" readonly>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <mat-icon (click)="clearDate()">replay</mat-icon>`,
    styleUrls: ['./date-picker.component.scss']
  })
  
  export class DatePickerComponent implements OnInit {
    public form: FormGroup;
    public control : FormControl;
    @Input() controlName : string;
    @Input() placeHolder : string;
  
  
    constructor(private controlContainer: ControlContainer) { 
    }
  
    clearDate(){
      this.control.reset();
    }
  
    ngOnInit() {
      this.form = <FormGroup>this.controlContainer.control;
      this.control = <FormControl>this.form.get(this.controlName);
      }
  
  }
  

  ---

  css日期选择器：

  mat-icon{
  position: absolute;
  left: 83%;
  top: 31%;
  transform: scale(0.9);
  cursor: pointer;
  }
  

  ---

  并像这样使用：

  <app-date-picker class="col-md-4" [formGroup]="feuilleForm" controlName="dateCreation" placeHolder="Date de création"></app-date-picker>
  

  回复于 2024-04-20T19:53:08+08:00
• 1

  我会将表单作为输入传递给子组件;

  @Component(
      {
        moduleId: module.id,
        selector: 'epimss-error-messages',
        template: `
     <span class="error" *ngIf="errorMessage !== null">{{errorMessage}}</span>`,
        styles: [],
        directives: [REACTIVE_FORM_DIRECTIVES, NgIf]
  
      })
  export class ErrorMessagesComponent implements OnInit {
    @Input()
    ctrlName: string
  
    @Input('form') _form;
  
    ngOnInit() {
           this.errorMessage();
        }
  
    errorMessage() {
      // Find the control in the Host (Parent) form
      let ctrl = this._form.find(this.ctrlName);
  
      console.log('ctrl| ', ctrl)
  
  //    for (let propertyName of ctrl.errors) {
  //      // If control has a error
  //      if (ctrl.errors.hasOwnProperty(propertyName) && ctrl.touched) {
  //        // Return the appropriate error message from the Validation Service
  //        return CustomValidators.getValidatorErrorMessage(propertyName);
  //      }
  //    }
  
      return null;
    }
  

  当然，您需要将表单从父组件传递给子组件，您可以通过不同方式执行此操作，但最简单的方法是：

  在你父母的某个地方;

  <epimss-error-messages [form]='form'></epimss-error-messages>
  

  回复于 2024-04-20T19:53:08+08:00