angular - Angular 9 中的 ReactiveForms 中的 FormBuilder 工作，但发送错误

Question

我在 Angular 中的角度反应形式很清楚有问题。一切正常，但如果我点击几次，我的控制台会出现一些错误，我的第一个输入什么也没有显示。

我不知道为什么...

我的代码 component.ts ：

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { FormGroup, Validators, FormBuilder } from '@angular/forms';
    import { ClrForm } from '@clr/angular';

    import { Entreprise } from '@models/entreprise-model';
    import { EntrepriseService } from '@services/entreprise.service';
    import { Router } from '@angular/router';


    @Component({
        selector: 'app-entreprise-edit',
        templateUrl: './entreprise-edit.component.html',
        styleUrls: ['./entreprise-edit.component.scss']
    })
    export class EntrepriseEditComponent implements OnInit {
     @ViewChild(ClrForm, {static: true}) clrForm;

     updateEntForm: FormGroup;
     entreprise: Entreprise;
     loading = false;

     constructor(
       private entrepriseService: EntrepriseService,
       private formBuilder: FormBuilder,
       private router: Router,
       ) { }

  ngOnInit() {
    this.entrepriseService.findEnt()
      .subscribe(
        (ent) => {
        this.entreprise = ent.data;
        this.initForm();
      });
  }

  initForm() {
    this.updateEntForm = this.formBuilder.group({
      nameEnt: [this.entreprise.nameEnt, [Validators.required]],
      ville: [this.entreprise.ville, [Validators.required]],
      numSiret: [this.entreprise.numSiret, [Validators.required, Validators.minLength(14), Validators.maxLength(14)]],
      nbr_couvert: [this.entreprise.nbr_couvert, [Validators.required]],
    });
  }

  onSubmit() {
    if (!this.updateEntForm.valid) {
      this.clrForm.markAsTouched();
      return;
    }
    this.loading = true;
    this.entrepriseService.updateEnt(this.entreprise.id, this.updateEntForm.value)
    .subscribe(
      (ent) => {
        this.loading = false;
        this.entreprise = ent.data;
        this.router.navigate(['/dashboard/entreprise']);
      },
      (error: Error) => {
        this.loading = false;
        console.log(error);
      });
  }

}

我的代码 component.html ：

<form clrForm clrLayout="horizontal" [formGroup]="updateEntForm" class="form form--no-cols"
                (ngSubmit)="onSubmit()">

                <clr-input-container class="input-icon input-icon--nameEnt">
                    <label for="nameEnt">Le nom</label>
                    <input clrInput id="nameEnt" type="text" formControlName="nameEnt" name="nameEnt" required />
                    <clr-control-error *clrIfError="required">Ce champs est obligatoire!</clr-control-error>
                </clr-input-container>

                <clr-input-container class="input-icon input-icon--letter">
                    <label for="ville">La ville</label>
                    <input id="ville" clrInput type="text" formControlName="ville" name="ville" required />
                    <clr-control-error *clrIfError="required">Ce champs est obligatoire!</clr-control-error>
                </clr-input-container>

                <clr-input-container class="input-icon input-icon--nameEnt">
                    <label for="numSiret">Votre numéro de Siret:</label>
                    <input clrInput id="numSiret" type="number" formControlName="numSiret" name="numSiret"
                        required />
                    <clr-control-error *clrIfError="required">Ce champs est obligatoire!
                    </clr-control-error>
                </clr-input-container>

                <clr-input-container class="input-icon input-icon--letter">
                    <label for="nbr_couvert">Le nombre de couvert:</label>
                    <input clrInput id="nbr_couvert" type="number" formControlName="nbr_couvert" name="nbr_couvert"
                         required>
                    <clr-control-error *clrIfError="required">Ce champs est obligatoire!
                    </clr-control-error>
                </clr-input-container>

            </form>

我有不同的错误：

ERROR Error: "formGroup expects a FormGroup instance. Please pass one in.

       Example:


    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });"

ERROR TypeError: "ctx.ent is undefined"

ERROR TypeError: "this.form is undefined"

ERROR TypeError: "this.control.statusChanges is null"

如果有人有想法...

标签： angularformsreactiveformbuilderclarity

Answer 1

今天我举了一个很好的使用娱乐形式的例子，并指出了反应形式的 3 个元素

主题

至于将数据分配给表单，最好这样使用

constructor(private appService: appService) {
    if (this.route.snapshot.paramMap.get('id')) {
        this.id = Number(this.route.snapshot.paramMap.get('id'));
        this.appService.getData(this.id).subscribe(result => {
            this.model = result;
            this.formBasic.controls['id'].setValue(this.model.id);
            this.formBasic.controls['name'].setValue(this.model.name);
    }
}