错误错误：找不到名称为reactiveForms Angular的控件

问题描述 投票：0回答：1

我正在尝试将数据插入数据库中的两个表“client”和“address”。我想通过包含客户和地址字段的表单来完成此操作。这个想法是，当我单击“插入”按钮时，应该显示地址字段，显示地址输入字段，同时隐藏一些其他字段，例如密码和护照数据。当我单击“确定”时，这些字段应该再次隐藏。问题是，当我单击“确定”时，一旦再次打开插入表单，数据就会丢失，并且它会在我的控制台中返回以下错误：

ERROR Error: Cannot find control with name: 'pais'
    at _throwError (forms.mjs:3150:11)
    at setUpControl (forms.mjs:2933:13)
    at FormGroupDirective.addControl (forms.mjs:4782:9)
    at FormControlName._setUpControl (forms.mjs:5370:43)
    at FormControlName.ngOnChanges (forms.mjs:5315:18)
    at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:3032:14)
    at callHookInternal (core.mjs:4024:14)
    at callHook (core.mjs:4055:9)
    at callHooks (core.mjs:4006:17)
    at executeInitAndCheckHooks (core.mjs:3956:9)

还有另一个错误：

core.mjs:10614 ERROR TypeError: control.registerOnChange is not a function
    at setUpModelChangePipeline (forms.mjs:3116:13)
    at setUpControl (forms.mjs:2946:5)
    at FormGroupDirective.addControl (forms.mjs:4782:9)
    at FormControlName._setUpControl (forms.mjs:5370:43)
    at FormControlName.ngOnChanges (forms.mjs:5315:18)
    at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:3032:14)
    at callHookInternal (core.mjs:4024:14)
    at callHook (core.mjs:4055:9)
    at callHooks (core.mjs:4006:17)
    at executeInitAndCheckHooks (core.mjs:3956:9)

我的表格代码：

  <form class="form" [formGroup]="formClient" (ngSubmit)="onSubmit()">
    Nome completo
    <input
      type="text"
      class="form-control"
      placeholder="Nome"
      formControlName="nome"
    />
  

  <div class="form-group">
    <label for="email">E-mail</label>
    <input
      type="text"
      class="form-control"
      placeholder="E-mail"
      formControlName="email"
    />
  </div>
</div>

<div class="form-row">
  <div class="form-group">
    <span *ngIf="!showAddressForm && !showPassportForm">
      Endereço
      <button
        *ngIf="!showAddressForm && !showPassportForm"
        type="button"
        class="btn btn-primary"
        (click)="toggleAddressForm()"
      >
        Inserir
      </button>
    </span>

    <span *ngIf="!showAddressForm && !showPassportForm">
      Dados do Passaporte
      <button
        type="button"
        class="btn btn-primary"
        (click)="togglePassportForm()"
      >
        Inserir
      </button>
    </span>
  </div>

  <div class="form-group" *ngIf="!showAddressForm && !showPassportForm">
    <label for="senha">Senha</label>
    <input
      type="password"
      class="form-control"
      placeholder="Senha"
      formControlName="senha"
    />
  </div>
</div>

<div *ngIf="showAddressForm">
  <div class="form-group">
    <label for="pais">País</label>
    <input
      type="text"
      class="form-control"
      placeholder="País"
      formControlName="pais"
    />
  </div>
  <div class="form-group">
    <label for="endereco">Endereço</label>
    <input
      type="text"
      class="form-control"
      placeholder="Endereço"
      formControlName="endereco"
    />
  </div>

  <button class="btn btn-success" (click)="saveAddress()">OK</button>
</div>

<div class="form-row" *ngIf="showPassportForm">
  <button class="btn btn-success" (click)="savePassport()">OK</button>
</div>

<button
  *ngIf="!showAddressForm && !showPassportForm"
  class="buttonSubmitRegister"
  type="submit"
>
  Cadastrar
</button>

我的.ts代码：

import { Component, OnInit } from '@angular/core';
import { Client } from 'src/app/models/Client/client';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ClientService } from '../../services/api/apiservice.service';
import { Address } from 'src/app/models/Address/address';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss'],
})
export class SignupComponent implements OnInit {
  clientArray: any[] = [];
  isResultLoaded = false;
  showAddressForm: boolean = false;
  showPassportForm: boolean = false;
  formClient!: FormGroup;
  formAddress!: FormGroup;
  addressData: any = {};

  toggleAddressForm() {
    this.showAddressForm = true;
    this.showPassportForm = false;
  }

  togglePassportForm() {
    this.showAddressForm = false;
    this.showPassportForm = true;
  }

  savePassport() {
    this.showPassportForm = false;
  }

  constructor(private fb: FormBuilder, private clientService: ClientService) {
    this.getAllStudent();
  }

  ngOnInit(): void {
    this.createAddress(new Address('', '', '', ''));
    this.createForm(
      new Client('', '', '', '', '', '', '', this.formAddress.value)
    );
  }
  
  createAddress(address: Address) {
    this.formAddress = this.fb.group({
      pais: [address.country, Validators.required],
      endereco: [address.address, Validators.required],
      cidade: [address.city, Validators.required],
      cep: [address.zipcode, Validators.required],
    });
  
    console.log(this.formAddress.value);
  }
  
  createForm(client: Client) {  
    this.formClient = this.fb.group({
      nome: [client.name, Validators.required],
      email: [client.email, Validators.email],
      phone: [client.phone, Validators.required],
      nascimento: [client.birthdate, Validators.required],
      nacionalidade: [client.nationality, Validators.required],
      genero: [client.gender, Validators.required],
      senha: [client.password, Validators.required],
      endereco: this.formAddress,
    });
  }
  

  saveAddress() {
    this.addressData = this.formAddress.value;
    this.showAddressForm = false;
  }

  register() {
    console.log('Dados enviados para o servidor:', this.formClient.value);

    if (this.formClient.valid) {
      const clientData = {
        ...this.formClient.value,
        address: this.formAddress.value,
      };

      this.clientService.addClient(clientData).subscribe({
        next: (resultData: any) => {
          console.log(resultData);
          alert('Sucesso ao registrar');
          this.getAllStudent();
        },
        error: (error) => {
          console.error('Erro ao registrar:', error);
        },
      });
    }
  }

  onSubmit() {
    console.log(this.formClient.value);
    this.register();
  }
}

链接到我在 github 上的项目：

我的想法就在图像中。Image 1: with the insert button for address (endereço) image 2: with the fields to insert data into the address

我只想在打开地址或护照插入表格时隐藏字段（密码、护照数据、插入按钮），但我在字段中输入的数据应该仍然存在。当我再次单击“插入”时，数据应显示在字段中，直到我单击“提交”，并将它们发送到我的数据库。

node.js angular database forms angular-reactive-forms
1个回答
0
投票

我设法解决了它。问题是我没有在 div 中使用地址数据指定 formGroup，因此 formControl“国家/地区”未被识别。我不确定第二个错误，但无论如何它已经解决了。代码已在我的存储库中更新，以下是我所做的更改：

 <div *ngIf="showAddressForm" class="form-row">
  <h2>Endereço</h2>
  <div [formGroup]="formAddress" formclass="form-row">
    <div class="form-group">
      <label for="pais">País</label>
      <input
        type="text"
        class="form-control"
        placeholder="País"
        formControlName="pais"
      />
    </div>

为了在单击“确定”将数据发送到数据库后保存数据，我创建了一个名为 savingAddressData 的变量，并将其初始化为一个空对象 ({})，在其中存储我的 formGroup，确保关闭时它不会丢失田野。

我的signup.component.ts：

savedAddressData: any = {};
savedPassportData: any = {};

  constructor(private fb: FormBuilder, private clientService: ClientService) {
    this.getAllStudent();
  }

  ngOnInit(): void {
    this.createAddress(new Address('', '', '', ''));
    this.createPassport(new Passport('', '', '', '')); 
    this.createForm(
      new Client(
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        this.formAddress.value,
        this.formPassport.value
      )
    );
  }

  createForm(client: Client) {
    this.formClient = this.fb.group({
      nome: [client.name, Validators.required],
      email: [client.email, Validators.email],
      phone: [client.phone, Validators.required],
      nascimento: [client.birthdate, Validators.required],
      nacionalidade: [client.nationality, Validators.required],
      genero: [client.gender, Validators.required],
      senha: [client.password, Validators.required],
      endereco: this.formAddress,
      passaporte: this.formPassport,
    });
  }

  createAddress(address: Address) {
    this.formAddress = this.fb.group({
      pais: address.country,
      endereco: address.address,
      cidade: address.city,
      cep: address.zipcode,
    });
    console.log(this.formAddress.value);
  }
  createPassport(passport: Passport) {
    this.formPassport = this.fb.group({
      nomePassaporte: passport.namePassport,
      numero: passport.number,
      paisEmissor: passport.issuingCountry,
      dataExpiracao: passport.expirationDate,
    });
  }

  saveAddress() {
    this.savedAddressData = this.formAddress.value;
    this.showAddressForm = false;
    console.log(this.savedAddressData);
  }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.