Question

我正在为子组件中的每个输入定义formControl，如下面的代码所示。如果我想将formControl的定义移至父组件该怎么办。看起来怎么样？

父组件html：

<div class="col-6">

  <form (ngSubmit)="handleSubmit(form.value, form.valid)" #form="ngForm" novalidate>

    <app-login-form-row
      [label]="'username'"
      [datatype]="'text'"
      [(value)]="login.username"
      (onBlur)="blurMes()"
      [validationType]="'alpha'"
    ></app-login-form-row>

    <app-login-form-row
      [label]="'password'"
      [datatype]="'text'"
      [(value)]="login.password"
      [validationType]="'[0-9]*'"
    ></app-login-form-row>

    <button (click)="showValue()">submit</button>

  </form>

</div>

子组件ts

export class LoginFormRowComponent implements OnInit {

  login: Object = {
    username: '',
    password: '',
  };

  @Input() value: string;
  @Input() label: string;
  @Input() datatype: string;
  @Input() validationType: string;

  @Output() valueChange: EventEmitter<String> = new EventEmitter<String>();
  @Output() onBlur: EventEmitter<string> = new EventEmitter<string>();

  public formControl: FormControl;

  constructor() { }

  ngOnInit() {
    let asd = '';
    if (this.validationType === 'alpha') {
      asd = '[0-9]*';
    }
    this.formControl = new FormControl('', Validators.pattern(asd));
  }

  onInputBlur(event) {
    this.onBlur.emit(event.target.value);
  }


}

Answer 1

创建顶层表单，然后将子组件包装在表单中

app.component.html

<form [formGroup]="createFormGroup">
        <app-base></app-base>
</form>

app.componenent.ts

 this.createFormGroup= new FormGroup({})

base.component.ts

内部子组件使用viewProviders获取父表单实例，以向现有表单添加更多formcontrol

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, ControlContainer, FormGroupDirective, Validators, FormBuilder, NgModel } from '@angular/forms';
@Component({
  selector: 'app-base',
  templateUrl: './base.component.html',
  styleUrls: ['./base.component.css'],
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class BaseComponent implements OnInit {
  personalData;
  constructor(private parentForm: FormGroupDirective) { }

  ngOnInit() {
    this.personalData = this.parentForm.form;
    this.personalData.addControl('personalData', new FormGroup({
      Name: new FormControl('', Validators.required),
      Code: new FormControl('', Validators.required),
      ID: new FormControl('', Validators.required)
    }));
  }
}

base.component.html

<div formGroupName="personalData">
    <div>
        Name:
        <input formControlName="Name">
</div>
<div>
  Code:
       <input formControlName="Code">
  </div>

<div>
     ID:
        <input formControlName="ID">
</div>  
</div>

示例：https://stackblitz.com/edit/angular-project-form-hnkred

将formControl移到父组件

1 个答案: