Angular 财产'；诺姆'；不存在于类型'；FormGroup'；

我有一个angular应用程序，在通过ReactiveForms进行表单验证时遇到一些问题，出现以下错误：

ng发球错误：

src/app/pages/contact/contact.component.ts（48,32）：错误TS2339: 类型“FormGroup”上不存在属性“assunto”。 src/app/pages/contact/contact.component.ts（50,57）：错误TS2339: 类型“FormGroup”上不存在属性“assunto”。 src/app/pages/contact/contact.component.ts（51,30）：错误TS2339: 类型“FormGroup”上不存在属性“nome”。 src/app/pages/contact/contact.component.ts（52,33）：错误TS2339: 类型“FormGroup”上不存在属性“empresa”。 src/app/pages/contact/contact.component.ts（53,32）：错误TS2339: 类型“FormGroup”上不存在属性“email”。 src/app/pages/contact/contact.component.ts（54,34）：错误TS2339: 类型“FormGroup”上不存在属性“telefone”

contact.component.html

<form class="col-s4 dados-form" [formGroup]="dadosForm">

<mat-form-field style="width:100%" class="full-width">
  <input matInput placeholder="Nome" formControlName="nome" required>
  <mat-error *ngIf="dadosForm.get('nome').dirty || dadosForm.get('nome').touched">
    O campo nome deve ser preenchido</mat-error>
</mat-form-field> <br>

<mat-form-field style="width:100%" class="full-width">
  <input matInput placeholder="Empresa" formControlName="empresa" required>
  <mat-error
    *ngIf="dadosForm.get('empresa').dirty || dadosForm.get('empresa').touched">
    O campo empresa deve ser preenchido</mat-error>
</mat-form-field> <br>

<mat-form-field style="width:100%" class="full-width">
  <input matInput placeholder="E-Mail" formControlName="email" required>
  <mat-error
    *ngIf="dadosForm.get('email').dirty || dadosForm.get('email').touched">
    {{getMailErrorMessage()}}</mat-error>
</mat-form-field> <br>
<mat-form-field style="width:100%" class="full-width">
  <input matInput maxlength="15" id="phoneInput" formControlName="telefone" [mask]="phoneMask" placeholder="Telefone para Contato" required />
  <mat-error
    *ngIf="dadosForm.get('telefone').dirty || dadosForm.get('telefone').touched">
    O campo telefone deve ser preenchido</mat-error>
</mat-form-field> <br>

<mat-form-field style="width:100%" class="full-width">
  <mat-label>Produto Desejado</mat-label>
  <mat-select matInput formControlName="assunto" required>
    <mat-optgroup *ngFor="let categoria of produtos" [label]="categoria.key">
      <mat-option *ngFor="let produto of categoria.value" [value]="produto">
        {{produto}}
      </mat-option>
    </mat-optgroup>
  </mat-select>
  <mat-error
    *ngIf="dadosForm.get('assunto').dirty || dadosForm.get('assunto').touched">
    O campo assunto deve ser preenchido</mat-error>
</mat-form-field><br>

<mat-form-field style="width:100%" class="full-width">
  <textarea matInput placeholder="Mensagem" formControlName="mensagem" required></textarea>
  <mat-error
    *ngIf="dadosForm.get('mensagem').dirty || dadosForm.get('mensagem').touched">
    O campo mensagem deve ser preenchido</mat-error>
</mat-form-field><br>

<div class="form-buttons">
  <button mat-button mat-raised-button id="submitButton" [disabled]="!dadosForm.valid" matTooltip="" color="primary" (click)="sendMail(mensagem)">Enviar</button>
</div>

</form>

---

使用form builder

FormBuilder

进行验证

首先导入这些依赖项

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

为窗体组创建变量

formGroupName: FormGroup;

constructor(private _formBuilder: FormBuilder) { }

在

ngOnInit

方法中设置验证代码

this.formGroupName = this._formBuilder.group({
    nome: ['', Validators.required],
    empresa: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    telefone: ['', Validators.required],
    assunto: ['', Validators.required],
    mensagem: ['', Validators.required]
});

---

试着这样做。

我刚刚得到了那个错误，我这样做了，例如，在您的第一次输入中：

<div *ngIf="f.name.invalid && f.name.touched">
                                <small class="text-danger" *ngIf="f.name.errors?.required">Please enter the name!</small>
                            </div>

<mat-error *ngIf="dadosForm.get('nome').dirty || dadosForm.get('nome').touched">O campo nome deve ser preenchido</mat-error>

我使用的Angular 10+与您使用的输入模板相同，我没有使用

dirty

和

toucted

，因此，对于唯一验证，您可以只使用

dadosForm.invalid

在

*ngIf

中，并获取要验证的唯一消息错误

等价物：

<mat-error *ngIf="dadosForm.get('nome').invalid">O campo nome deve ser preenchido</mat-error>

<mat-error *ngIf="dadosForm.invalid">O campo nome deve ser preenchido</mat-error>

O campo nome deve ser preenchido

另一个等价物：

<mat-error *ngIf="dadosForm.get('nome').invalid">O campo nome deve ser preenchido</mat-error>

<mat-error *ngIf="dadosForm.invalid">O campo nome deve ser preenchido</mat-error>

O campo nome deve ser preenchido

制作一个堆栈闪电战示例我在代码中没有看到任何明显的问题，请为它制作一个堆栈闪电战，就像表单构造之前模板呈现的一样。您可能需要将

*ngIf=dadosForm

添加到

元素。@ala我已尝试创建Stackblitz，但Stackblitz未显示所有错误。而且表单没有错误。@TheHeadlush，我已经尝试过做*ngIf，但没有成功。我想知道是否有其他方法可以做到这一点。

<mat-error *ngIf="dadosForm.invalid">O campo nome deve ser preenchido</mat-error>