“FormGroup”型別上不存在Angular13屬性

大家晚上好！

我最近在使用 Angular 時遇到了一些問題。我是 Angular 的新手，所以我在這里和那里遇到很多錯誤。謝天謝地，我有這個美麗的大社區來帶來一些知識。

我正處于 Angular 中驗證表單的階段。

我正在嘗試通過視圖（html 檔案）和組件（組件檔案）進行驗證。

這些是我遇到的問題：

• 我的欄位驗證似乎不起作用，因為當我單擊表單的提交按鈕時，它會自動跳過任何可能的驗證??

• 雖然我無法在組件中進行驗證，但我什至無法使用 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>

添加專案.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)：

我現在收到這幾個錯誤：

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

你能分享一個活生生的例子嗎？這將有助于了解發生了什么。例如，您可以使用 stackblitz

標籤：

上一篇：迭代深度嵌套的物件

下一篇：殺死process.exec函式