“FormGroup”类型上不存在 Angular 13 属性

Question

大家晚上好！

我最近在使用 Angular 时遇到了一些问题。我是 Angular 的新手，所以我在这里和那里遇到很多错误。谢天谢地，我有这个美丽的大社区可以带来一些知识。

我正在 Angular 中验证表单。

我正在尝试通过视图（html 文件）和组件（组件文件）进行验证。

这些是我在 atm 遇到的问题：

---

• 我的字段验证似乎不起作用，因为当我单击表单的提交按钮时，它会自动跳过任何可能的验证????

---

• 虽然我无法在组件中进行验证，但我什至无法使用 ngIf* 在表单内进行自定义验证（我使用的是 Material Design 样式库）

---

我已经尝试了所有方法，但无法正常工作。

这些是我的文件：

add-project.component.html：

<div class="new-project">
    <mat-toolbar>
        <span>New Project</span>
    </mat-toolbar>
    <form [formGroup]="projectForm" (ngSubmit)="onSubmit()">
    <mat-card>
        <mat-card-content>
            <p>
                <mat-form-field appearance="outline">
                    <mat-label>Title</mat-label>
                    <input formControlName="title" matInput required placeholder="Title">
                    <mat-error *ngIf="projectForm.title.required">Title is required</mat-error>
                </mat-form-field>
            </p>
            <p>
                <mat-form-field appearance="outline">
                    <mat-label>Description</mat-label>
                    <textarea rows="6" formControlName="description" matInput placeholder="Description"></textarea>
                </mat-form-field>
            </p>
            <p>
                <mat-form-field appearance="outline">
                    <mat-label>Access Code</mat-label>
                    <input id="accessCode" formControlName="accessCode" matInput placeholder="Access Code">
                </mat-form-field>
            </p>
        <!-- FORM CONTENT -->
        </mat-card-content>
        <mat-card-actions>
            <button mat-raised-button color="primary" type="submit">Create Project</button>
         <!-- REGISTER BUTTON -->
        </mat-card-actions>
    </mat-card>
    </form>
</div>

add-project.component.ts

import { Project } from 'src/app/models/project.model';
import { ProjectService } from 'src/app/services/project.service';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Component, OnInit, NgZone } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-add-project',
  templateUrl: './add-project.component.html',
  styleUrls: ['./add-project.component.css']
})



export class AddProjectComponent implements OnInit {
  projectForm: FormGroup;
  
  constructor(
    public formBuilder: FormBuilder,
    private router: Router,
    private ngZone: NgZone,
    private project: ProjectService,
  ) { 
    this.projectForm = this.formBuilder.group({
      title: ['', [Validators.required, Validators.minLength(3)]],
      description: [''],
      accessCode: [''],
    })
  }
  ngOnInit() { }
  onSubmit(): any {
    if (this.projectForm.valid) {
        console.log('form submitted');
      } else {
        // validate all form fields
      
    this.project.create(this.projectForm.value)
    .subscribe(() => {
        console.log('User added successfully!')
        this.ngZone.run(() => this.router.navigateByUrl('/projects'))
      }, (err) => {
        console.log(err);
    });
  }
}
}

有人可以帮我解决我遇到的这些问题吗？不知道怎么继续，我被屏蔽了几天没有解决。

非常感谢你们！

使用@Misha Mashina cmets 编辑（2022 年 11 月 1 日 21:46）：

我现在遇到了这几个错误：

Answer 1

啊，原来是 Angular 13 的变化 - 我还没有遇到这种差异 :) 无论如何，而不是：

<mat-error *ngIf="projectForm.controls.title.errors?.required">

和

<mat-error *ngIf="projectForm.controls.title.errors?.minLength">

你现在必须做的：

<mat-error *ngIf="projectForm.controls['title'].errors?.['required']">

和

<mat-error *ngIf="projectForm.controls['title'].errors?.['minLength']">

Answer 2

你能分享一个活生生的例子吗？这将有助于了解发生了什么。例如，您可以使用 stackblitz