Question

我的表单有问题，错误是：无法读取undefined属性'dirty' 当我在我的代码上删除脏时，同样的错误为hasError ..

所以我想使用dirty et hasError但它失败了，所以如果你能帮我谢谢！

我的表格是：

<form (ngSubmit)="addProject()" [formGroup]="dataProjectForm">
    <div class="form-group">
      <label for="nom">Nom</label>
      <input id="nom" class="form-control" name="nom" formControlName="nom" required>
      <div class="error" *ngIf="nomCtrl.control.dirty && nomCtrl.control.hasError('required')">Veuillez remplir un nom</div>
    </div>

    <div class="form-group">
        <label for="capteurs">Description</label>
        <textarea id="capteurs" class="form-control" name="capteurs" formControlName="capteurs" required></textarea>
        <div class="error" *ngIf="capteursCtrl.control.dirty && capteursCtrl.control.hasError('required')">Veuillez remplir une description</div>
    </div>

    <button class="log-in" type="submit" [disabled]="!loginForm.valid">Connexion</button>
</form>

在我的component.ts中，我尝试这样做：

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { FormControl, Validators, FormBuilder, FormGroup } from 
'@angular/forms';

import { UserModel } from '../models/user.model';
import { UserService } from '../user.service';

import { ProjetModel } from '../models/projet.model';
import { ProjetService } from '../projet.service';

export class ProjetsComponent implements OnInit {

user: UserModel;
userEventsSubscription: Subscription;

projets: Array<ProjetModel> = [];
selectedProjet: ProjetModel;

nomCtrl: FormControl;
capteursCtrl: FormControl;
token: any;
id: any;

dataProjectForm: FormGroup;
data: string;

registrationFailed: boolean;

constructor(private projetService: ProjetService,
  private userService: UserService,
  private fb: FormBuilder,
) {
this.projetService.list().subscribe(projets => this.projets = 
projets);
console.log('projets', this.projets);
}

ngOnInit() {
this.createForm();
this.projetService.list().subscribe(projets => this.projets = 
projets);
console.log('projets', this.projets);
this.userService.retrieveUser();
this.userEventsSubscription = 
this.userService.userEvents.subscribe(user => this.user = user);
this.token = this.user['value'];
console.log('token:', this.token);
}

onSelect(projet: ProjetModel): void {
this.selectedProjet = projet;
}

createForm() {
  this.nomCtrl = this.fb.control('', [Validators.required]);
  this.capteursCtrl = this.fb.control('', [Validators.required]);

  this.dataProjectForm = this.fb.group({
    nom: this.nomCtrl,
    capteurs: this.capteursCtrl,
  });
}

addProject() {
  this.registrationFailed = false;
  this.projetService.addProject(
      this.id,
      this.token,
      this.dataProjectForm.value.nom,
      this.dataProjectForm.value.capteurs,
  ).subscribe(
      () => this.data = 'Le projet a bien été enregistré',
      () => this.registrationFailed = true,
      () => this.reloadPage()
  );
}

所以我想我会想要导入一个模块，但我已导入所有这些我不明白

Answer 1

control和dirty是FormControl类的属性。

在*ngIf语句中，您尝试使用以下命令访问这些属性 nomCtrl.control.dirty && nomCtrl.control.hasError('required')，但您应该做的是*ngIf="nomCtrl.dirty && nomCtrl.hasError('required')

固定代码：

<form (ngSubmit)="addProject()" [formGroup]="dataProjectForm">
  <div class="form-group">
    <label for="nom">Nom</label>
    <input id="nom" class="form-control" name="nom" formControlName="nom" required>
    <div class="error" *ngIf="nomCtrl.dirty && nomCtrl.hasError('required')">Veuillez remplir un nom</div>
  </div>

  <div class="form-group">
    <label for="capteurs">Description</label>
    <textarea id="capteurs" class="form-control" name="capteurs" formControlName="capteurs" required></textarea>
    <div class="error" *ngIf="capteursCtrl.dirty && capteursCtrl.hasError('required')">Veuillez remplir une description</div>
  </div>

  <button class="log-in" type="submit" [disabled]="!loginForm.valid">Connexion</button>
</form>

Angular - 使用模板驱动的验证

1 个答案: