Связывание нескольких форм с одним и тем же элементом управления реактивной формой с использованием проблемы * ngFor проверки

Question

Я пытаюсь создать систему комментариев на сайте. Где сообщение блога имеет поле формы комментария, а каждый комментарий имеет поле формы ответа. Но форма ответа и форма комментария имеют одинаковые поля ввода, поэтому я пытаюсь инициализировать форму комментария и форму ответа с одинаковой реактивной формой. Вот как это выглядит:

 ngOnInit(){
    this.commentForm = this.formBuilder.group({
        comment: ['', [Validators.required]]
    });
 }

Мой код Html выглядит так:

<div *ngFor="let item of allBlogPost">
<p>item.blogPostText</p>
<div class='comment'>
    <div *ngFor="let comment of allBlogPost.comments">
        <p>{{comment.comment_text}}</p>
        <div *ngFor="let reply of comment.replies">
            <p>{{reply.reply_text}}</p>
        </div>
        <form [formGroup]="commentForm" (ngSubmit)="onReplySubmit()">
            <input type="text" formControlName="comment"/>
            <button type="submit" [disabled]="commentForm.invalid">Reply</button>
        </form>
    </div>
    <form [formGroup]="commentForm" (ngSubmit)="onCommentSubmit()">
        <input type="text" formControlName="comment"/>
        <button type="submit" [disabled]="commentForm.invalid">Comment</button>
    </form>
</div>

Код работает нормально, когда я публикую комментарии и ответы. Но проблема в том, что когда я пишу комментарий внутри формы комментария или формы ответа, кнопка отправки активируется, так как форма теперь действительна. Но все остальные кнопки отправки формы также стали активными (как я полагаю, это происходит для одной из форм, которые проходят проверку), хотя они остаются нетронутыми. Но сейчас я не знаю, как решить проблему.

Мне нужно активировать определенную кнопку отправки, когда конкретная форма действительна. Как я могу получить функциональность angular способом?

Answer 1

Есть несколько подходов. Одним из способов является создание компонента комментариев для вашего приложения. Это гарантирует, что у вас будет больше экземпляров formGroup

<div *ngFor="let item of allBlogPost">
<p>item.blogPostText</p>

<div class='comment'>
  <app-comment *ngFor="let comment of allBlogPost.comments" [comment]="comment">
  </app-comment>
</div>

Используйте декоратор @Input в вашем новом компоненте комментариев, как этот

comment.component.ts

@Component({
  selector: 'app-comment',
  templateUrl: './comment.component.html'
})
export class CommentComponent implements OnInit {
@Input() comment;

ngOnInit(){
  this.commentForm = this.formBuilder.group({
    comment: ['', [Validators.required]]
  });
}

// Remember to move the rest of the comment logic from your bloglist...

}

comment.component. html

<p>{{comment.comment_text}}</p>
<div *ngFor="let reply of comment.replies">
  <p>{{reply.reply_text}}</p>
</div>
<form [formGroup]="commentForm" (ngSubmit)="onReplySubmit()">
  <input type="text" formControlName="comment"/>
  <button type="submit" [disabled]="commentForm.invalid">Reply</button>
</form>
</div>
<form [formGroup]="commentForm" (ngSubmit)="onCommentSubmit()">
  <input type="text" formControlName="comment"/>
  <button type="submit" [disabled]="commentForm.invalid">Comment</button>
</form>