Question

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

错误：没有名称的表单控件的值访问器：＆＃39; nomeEmpresaAerea＆＃39; 错误：没有名称的表单控件的值访问器：＆＃39; nomeEmpresaAerea＆＃39; 堆栈跟踪： _throwError @的WebPack内部：///./node_modules/@angular/forms/esm5/forms.js：2510：11 setUpControl @的WebPack内部：///./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内部：///./node_modules/@angular/core/esm5/core.js：12581：9 checkAndUpdateNodeInline @的WebPack内部：///./node_modules/@angular/core/esm5/core.js：14109：20 checkAndUpdateNode @的WebPack内部：///./node_modules/@angular/core/esm5/core.js：14052：16 debugCheckAndUpdateNode @的WebPack内部：///./node_modules/@angular/core/esm5/core.js：14945：55 debugCheckDirectivesFn @的WebPack内部：///./node_modules/@angular/core/esm5/core.js：14886：13 View_EmpresaCadastroComponent_0 /＆LT; @ng：///EmpresaModule/EmpresaCadastroComponent.ngfactory.js：80：5 debugUpdateDirectives @的WebPack内部：///./node_modules/@angular/core/esm5/core.js：14871：12 checkAndUpdateView @的WebPack内部：///./node_modules/@angular/core/esm5/core.js：14018：5 callViewAction @的WebPack内部：///./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)});

具有自定义输入

1 个答案: