具有自定义输入的反应式表单

Question

尝试使用自定义组件创建表单时出现以下错误。

Error: No value accessor for form control with name: 'nomeEmpresaAerea' Error: No value accessor for form control with name: 'nomeEmpresaAerea' Stack trace: _throwError@webpack-internal:///./node_modules/@angular/forms/esm5/forms.js:2510:11 setUpControl@webpack-internal:///./node_modules/@angular/forms/esm5/forms.js:2380:9 FormGroupDirective.prototype.addControl@webpack-internal:///./node_modules/@angular/forms/esm5/forms.js:6736:9 FormControlName.prototype._setUpControl@webpack-internal:///./node_modules/@angular/forms/esm5/forms.js:7386:45 FormControlName.prototype.ngOnChanges@webpack-internal:///./node_modules/@angular/forms/esm5/forms.js:7299:13 checkAndUpdateDirectiveInline@webpack-internal:///./node_modules/@angular/core/esm5/core.js:12581:9 checkAndUpdateNodeInline@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14109:20 checkAndUpdateNode@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14052:16 debugCheckAndUpdateNode@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14945:55 debugCheckDirectivesFn@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14886:13 View_EmpresaCadastroComponent_0/<@ng:///EmpresaModule/EmpresaCadastroComponent.ngfactory.js:80:5 debugUpdateDirectives@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14871:12 checkAndUpdateView@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14018:5 callViewAction@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14369:21

这是我的反应形式：

import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';

import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-empresa-cadastro',
  templateUrl: './empresa-cadastro.component.html',
  styleUrls: ['./empresa-cadastro.component.css']
})
export class EmpresaCadastroComponent implements OnInit {

  @Input() empresa = {};

  empresaForm: FormGroup;

  constructor(private route: Router, private http: HttpClient, private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.empresaForm = this.fb.group({
      nomeEmpresaAerea: '',
      status: 'S',
    });
  }

这是我的 html:

<form [formGroup]="empresaForm" (ngSubmit)="onSubmit()">
        <div style="margin-bottom: 1em">
          <button type="submit" [disabled]="empresaForm.pristine" class="btn btn-success">Cadastrar</button>
          <button type="button" (click)="limpar()" [disabled]="empresaForm.pristine" class="btn btn-danger">Limpar</button>
        </div>

        <div class="form-group">
          <label class="center-block">Nome:
            <input class="form-control" >
            <app-pf-input-text formControlName="nomeEmpresaAerea" ></app-pf-input-text>
          </label>
        </div>

      </form>

pf-输入-text.componente.ts:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-pf-input-text',
  templateUrl: './pf-input-text.component.html',
  styleUrls: ['./pf-input-text.component.scss']
})
export class PfInputTextComponent implements OnInit {

  @Input() id: string;
  @Input() name: string;
  @Input() value: string;
  @Input() placeholder: string;

  //falta trim

  @Input() maxlength: string;
  @Input() minlength: string;

  @Input() disabled: boolean;
  @Input() required: boolean;

  constructor() { }

  ngOnInit() {
  }

}

pf-输入-text.component.html

<div class="input-group">
  <input 
      type="text" 
      id="{{id}}" 
      name="{{name}}" 
      placeholder="{{placeholder}}" 
      attr.maxlength="{{maxlength}}"
      class="form-control"
      disabled="{{disabled}}"
      required="{{required}}">
</div>

Answer 1

在反应式组件中试试这个

this.empresaForm = new FormGroup({
     'nomeEmpresaAerea': new FormControl(null, Validators.required)});

具有自定义输入的反应式表单

ReactiveForms with custom input

custom-component

angular-reactive-forms

angular5