Angular 13 属性在类型 'FormGroup' 上不存在

Question

大家晚上好！

我最近在使用 Angular 时遇到了一些问题。我是 Angular 的新手，所以我时常遇到很多错误。值得庆幸的是，我有这个美丽的大社区可以带来一些知识。

我正在 Angular 中验证表单。

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

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

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

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

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

这些是我的文件：

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

加-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 评论（11/01/2022 21:46）：

我现在遇到以下几个错误：

Answer 1

能否分享一个实例？这将有助于了解正在发生的事情。例如，您可以使用 stackblitz

Answer 2

啊，所以这是 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']">

注意小写的最小长度

Angular 13 属性在类型 'FormGroup' 上不存在

Angular 13 Property does not exist on type 'FormGroup'

html

javascript

properties

angular

Angular 13 属性 在类型 'FormGroup' 上不存在

Angular 13 Property does not exist on type 'FormGroup'

html

javascript

properties

angular

Angular 13 属性在类型 'FormGroup' 上不存在