angular - “FormGroup”类型上不存在属性“nome”
问题描述
我有一个角度应用程序,我在通过 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”。
联系人.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>
联系人.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])
});
解决方案
<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; }
推荐阅读
- apache-kafka - Micronaut Kafka:运行状况检查失败并显示“集群授权失败”
- flutter - 如何降低 Flutter 中输入文本字段的高度?
- python - 从 asyncio 循环启动新进程
- django - 数据库更改为 Postgres (Django) 后无法恢复数据库
- node.js - 需要使用 Docker 和 Nginx 提高我网站的页面速度
- reactjs - GUNjs 用户未在隐身窗口中获得身份验证
- html - Angular Checkbox - 无法获取数据库的值以匹配 html 复选框中的复选标记
- vba - 如何通过 VBA/DASL 在 Outlook 中搜索约会?
- angular - 基本角度应用程序无法运行,错误模块构建失败:找不到模块../@angular-devkit/src/babel/X
- wordpress - 如何在 WordPress 中显示自定义的最近帖子?