如何以相同的控件名称控制每个反应形式？

Question

你好，我正在为我的网站构建问答页面。当客户提出问题时，经理可以在同一页面中回答每个问题。但我不知道如何控制每个文本区域。如果我为第一个问题写答案而不是单击第二个或其他提交按钮，它将像我单击第一个按钮时一样运行。如何控制每个文本区域？

谢谢

board.component.html

<div class="col-lg-7 col-xl-8">
        <!-- Post title -->
        <h3 class="font-weight-bold mb-3"><strong>{{post.title}}</strong></h3>
        <!-- Excerpt -->
        <p class="dark-grey-text">{{ post.message }}</p>
        <!-- Post data -->
        <p>by <a class="font-weight-bold">{{post.name}}</a>, <a type="date">{{ post.created_at }}</a></p>
        <!-- Read more button -->
        <form [formGroup]="responseForm" (ngSubmit)="onSubmit(post)">
            <div class="md-form">
                <textarea id="response" class="md-textarea form-control" formControlName="response" rows="3" id="responseText" type="text" length="120" mdbCharCounter mdbInput></textarea>
                <label for="input_text">Type your text</label>
            </div>
            <button [disabled] ="!responseForm.valid" type="submit()">dddd</button>
        </form>
      </div>

Board.component.ts

posts : Post[] = [];
  private postsSub: Subscription;

  responseForm: FormGroup; 

  headElements = ['Title', 'Name', 'Email', ''];
  masterHeadElements = ['Message'];
  constructor(private contactService : ContactService) { }

  ngOnInit(): void {
    this.responseForm = new FormGroup({
      id: new FormControl(''),
      response : new FormControl('', Validators.required)
    });

    this.contactService.getPosts();
    this.postsSub = this.contactService.getPostUpdatedLintenr().subscribe((posts: Post[]) => { 
      this.posts = posts
    });    
    //this.responseForm.controls['id'].patchValue(this.posts);

  }

  
  onSubmit(postData : Post){
      let newPost : Post = {
        id: postData.id,
        name : postData.name,
        email : postData.email,
        message : postData.message,
        response : this.responseForm.value.response     //I don't know how to make this part...
      }
      this.responseForm.reset();
      console.log(newPost)
  }

Answer 1

如果我理解错误但我看不到完整代码，请纠正我。所以我想：

Board.component.html 为 posts[]

的每个 post 展示所有带有 *ngFor 的 post

但是在 board.component.ts 中只为所有 post 创建了一个表单。因此每个按钮也提交属于其他 post 的表单。

考虑到您的方法，我要做的是将此组件分解为更小的组件。所以我会创建另一个较小的组件，例如 post.component.ts

以下post.component.html

<div class="col-lg-7 col-xl-8">
        <!-- Post title -->
        <h3 class="font-weight-bold mb-3"><strong>{{post.title}}</strong></h3>
        <!-- Excerpt -->
        <p class="dark-grey-text">{{ post.message }}</p>
        <!-- Post data -->
        <p>by <a class="font-weight-bold">{{post.name}}</a>, <a type="date">{{ post.created_at }}</a></p>
        <!-- Read more button -->
        <form [formGroup]="responseForm" (ngSubmit)="onSubmit(post)">
            <div class="md-form">
                <textarea id="response" class="md-textarea form-control" formControlName="response" rows="3" id="responseText" type="text" length="120" mdbCharCounter mdbInput></textarea>
                <label for="input_text">Type your text</label>
            </div>
            <button [disabled] ="!responseForm.valid" type="submit()">dddd</button>
        </form>
      </div>

那么post.component.ts只会提交一个post。 post.component.ts 将通过 @Input() post: Post

收到 post 详细信息

然后父 board.component.html 将使用 ngFor

渲染每个 post

<div class="col-lg-7 col-xl-8" *ngFor ="let post of posts">
  <app-post [post]="post"> </app-post>   <-- pass post details to child component
</div>

那么board.component.ts就会变成

  @Input() post : Post;
 
  responseForm: FormGroup; 

  headElements = ['Title', 'Name', 'Email', ''];
  masterHeadElements = ['Message'];
  constructor(private contactService : ContactService) { }

  ngOnInit(): void {
    this.responseForm = new FormGroup({
      id: new FormControl(''),
      response : new FormControl('', Validators.required)
    });
    this.responseForm.controls['id'].value = this.post.id;
  }

  
  onSubmit(postData : Post){
      let newPost : Post = {
        id: postData.id,
        name : postData.name,
        email : postData.email,
        message : postData.message,
        response : this.responseForm.controls['response'].value   
      }
      this.responseForm.reset();
      console.log(newPost)
  }

如何以相同的控件名称控制每个反应形式？

how to control each reactive form in same control name?

typescript

form-control

angular

angular-reactive-forms

formgroups