typescript 属性'nome'在类型'FormGroup'上不存在

6g8kf2rb 于 2023-11-20 发布在 TypeScript

关注(0)|答案(4)|浏览(167)

我有一个Angular 的应用程序，我有一些问题，在我的表单验证通过ReactiveForms，我有以下错误：
ng服务错误：
src/app/pages/contact/contact.component.ts（48，32）：错误TS 2339：类型'FormGroup'上不存在属性'assunto'。src/app/pages/contact/contact.component.ts（50，57）：错误TS 2339：类型'FormGroup'上不存在属性'assunto'。src/app/pages/contact/contact.component.ts（51，30）：错误TS 2339：属性'nome'在类型'FormGroup'上不存在. src/app/pages/contact/contact.component.ts（52，33）：错误TS 2339：属性'empresa'在类型'FormGroup'上不存在. src/app/pages/contact/contact.component.ts（53，32）：错误TS 2339：属性'email'在类型'FormGroup'上不存在。src/app/pages/contact/contact.component.ts（54，34）：错误TS 2339：属性'telefone'在类型'FormGroup'上不存在。
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>

字符串
contact.component.ts

dadosForm = new FormGroup({
    nome: new FormControl('', [Validators.required]),
    empresa: new FormControl('', [Validators.required]),
    email: new FormControl('', [Validators.required, Validators.email]),
    telefone: new FormControl('', [Validators.required]),
    assunto: new FormControl('', [Validators.required]),
    mensagem: new FormControl('', [Validators.required])
  });

型

typescript

来源：https://stackoverflow.com/questions/56169902/property-nome-does-not-exist-on-type-formgroup

4条答案

按热度按时间

nuypyhwy1#

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

字符串
在ts文件中

get f() { return this.form.controls; }

型

赞(0）回复(0）举报 2023-11-20

wgmfuz8q2#

我只是得到了那个错误，我这样做了，例如，在你的第一个输入中：

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

字符串
只需更改*ngIf中的验证：

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

型
我使用的是Angular 10+，使用的输入模板和你一样，我没有使用dirty和touched，所以，对于唯一的验证，你可以在*ngIf中只使用dadosForm.invalid，然后得到你正在验证的唯一消息错误。
等效：

<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>

型

赞(0）回复(0）举报 2023-11-20

zrfyljdw3#

使用表单生成器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]
});

型
试试这个

赞(0）回复(0）举报 2023-11-20

kqhtkvqz4#

如果有人遇到这个错误，他们正在做类似的事情，因为我是，所以它可能会帮助他们。
“类型”FormGroup "上不存在属性“group"。ts（2339）”

this.searchForm = this.fb.group({
  clientName: ['', [noWhitespaceValidator]],
  startDate: [''],
  endDate: [''],
})

字符串
得到这个错误的原因是我初始化了表单，但我没有导入formBuilder。所以没有将它作为依赖注入构造函数，我得到了这个错误，因为它无法在fb.group中找到'group'。
希望它能帮助某人。

赞(0）回复(0）举报 2023-11-20

我来回答

typescript 属性'nome'在类型'FormGroup'上不存在

4条答案

相关问题

热门标签

最新问答