Angular 防止在网站上提交过多表格

我开始学习角度，我正在练习角度。为此，我创建了一个与表单相关的应用程序。我可以创建一个表单并保存它，然后显示它

我现在的问题是，我正试图阻止提交20多份表格。在20个表单之后，我想显示一条错误消息

为此，我创建了两个函数，但它们在HTML中工作得不够好。我的代码如下

后期创建.component.ts

export class PostCreateComponent {
   private postCounter = 0;

   @Output() postCreated = new EventEmitter<Post>();

   onAddPost(form: NgForm) {
      if (form.invalid) {
         return;
      }

      const post: Post = {
        title: form.value.title,
        content: form.value.content
      };

      this.postCreated.emit(post);
   }

   onAddPostCount() {
      this.postCounter++;
      console.log(this.postCounter);
   }

   onGetPostCount() {
     return this.postCounter;
   }
}

导出类后创建组件{
私有后计数器=0；
@Output（）postCreated=新的EventEmitter（）；
onAddPost（表格：NgForm）{
如果（格式无效）{
返回；
}
const post:post={
标题：form.value.title，
内容：form.value.content
};
此.post-created.emit（post）；
}
onAddPostCount（）{
这个.postCounter++；
console.log（this.postCounter）；
}
onGetPostCount（）{
返回此.postCounter；
}
}

post create.component.html

<mat-card>

   <form *ngIf="onGetPostCount() < 20" (submit)="onAddPost(postForm)" #postForm="ngForm" (submit)="onAddPostCount()">
      <mat-form-field>
         <input
           matInput
           type="text"
           name="title"
           ngModel
           required>
      <mat-error *ngIf="postForm.form.get('title')?.invalid">Please enter a title!</mat-error>
      </mat-form-field>
      <mat-form-field>
        <textarea
           matInput
           rows="4"
           name="content"
           ngModel
           required
           #content="ngModel">
        </textarea>
        <mat-error *ngIf="content.invalid">Please enter a content!</mat-error> 
      </mat-form-field>
      <button
         class="button"
         mat-raised-button
         color="primary"
         type="submit">Save Post
      </button>
      <mat-error *ngIf="onGetPostCount() > 20"> Count over 2</mat-error>
   </form>
</mat-card>

请输入标题！
请输入内容！
邮政储蓄
数到2

我想知道如何防止提交，例如，超过20篇帖子？我如何修复我的代码，或者有没有一种方法可以使我的代码更快更好

---

我会这样做：

• 仅使用一个函数提交表单并添加

  onAddPostCount（）

  提交调用函数中的函数
• 在TS文件中使用“允许”和“不允许”逻辑，并使用“一”代替“一” 重复条件2-3次以上

HTML代码：

<mat-card>
    <form (submit)="onAddPost(postForm)" #postForm="ngForm">
        <mat-form-field>
            <input matInput type="text" name="title" ngModel required>
      <mat-error *ngIf="postForm.form.get('title')?.invalid">
        Please enter a title!
      </mat-error>
      </mat-form-field>
      <mat-form-field>
        <textarea matInput rows="4" name="content" ngModel required #content="ngModel">
        </textarea>
        <mat-error *ngIf="content.invalid">
          Please enter a content!
        </mat-error> 
      </mat-form-field>
      <br>
      <button [disabled]="!isAllowToSubmit" class="button" mat-raised-button color="primary" type="submit">
        Save Post
      </button>
      &nbsp;
      <button [disabled]="isAllowToSubmit" class="button" mat-raised-button color="primary" type="button" (click)="resetPostCounter()">Reset
      </button>
      <mat-error *ngIf="!isAllowToSubmit"> 
        Count over 2
      </mat-error>
   </form>
</mat-card>

请输入标题！
请输入内容！


邮政储蓄
重置
数到2

TS代码：

private postCounter = 0;
private maximumNoOfPosts = 20;

isAllowToSubmit: boolean = true;

@Output() postCreated = new EventEmitter<any>();

onAddPost(form: NgForm) {
  if (form.invalid) {
     return;
  }
  const post: any = {
    title: form.value.title,
    content: form.value.content
  };

  this.postCreated.emit(post);
  this.onAddPostCount();
}

onAddPostCount() {
    if (this.postCounter == this.maximumNoOfPosts) {
      this.isAllowToSubmit = false;
    }
    else {
      this.postCounter++;
    }
}

resetPostCounter(){
    this.postCounter = 0;
    this.isAllowToSubmit = true;
}

private postCounter=0；
私有最大noofposts=20；
isAllowToSubmit:boolean=true；
@Output（）postCreated=new EventEmitter
你能提供stackblitzyes，我能@PrashantPimpale，但它不显示角度材质检查我的更新答案！