Question

当我尝试对*ngFor循环中存在的文本字段进行表单验证时，我是新手，所以验证工作正常，但它向每个字段显示，但我只想验证特定字段，所以请帮助我如何将验证放入特定的表单字段。

**HTML** 

    <div class="container" *ngFor="let post of posts; let i = index">
    <div class="row">
            <div class="col-md-12" style="display: block; ">

              <form [formGroup]="commentForm" method="post" enctype="multipart/form-data" (ngSubmit)="comment_Submit(post.user_id, post.post_id,
                commentForm)">
                <div class="form-group">
                  <input type="text" class="form-control" name="comment{{i}}" formControlName="comment" id="comment"
                    placeholder="Enter comments" cols="40" rows="5" spellcheck="true"
                    style="width:100%; height: auto; border: 1px solid #ada5a5; border-radius: 4px; outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word; "
                    [ngClass]="{'form-control': true,
                  'is-invalid': !f.comment.valid,
                  'is-valid':f.comment.valid}">
                  <div *ngIf="f.comment.errors?.minlength && f.comment.touched" class="text-danger">Comment
                    should be at
                    least 2 characters.</div>
                </div>

                <button type="submit" class="btn-sm btn-success" [disabled]="!commentForm.valid">Comment</button>

              </form>
            </div>
          </div>
    </div>

**TypeScript**
export class PostsComponent implements OnInit {

get f() { return this.commentForm.controls; }

constructor(private userService: UserService, private formBuilder: FormBuilder,
    private alerts: AlertsService) {
   this.commentFormValidation();

  }

commentForm: FormGroup;
  ngOnInit() {   }

    commentFormValidation() {
     this.commentForm = this.formBuilder.group({
      comment: [null, [Validators.required, Validators.minLength(2)]]
    });
  }

Answer 1

您的posts都共享一个相同的表格。如果您有n份posts，则需要n份表格。我们可以通过创建一个表单组数组（仅是JS数组）来实现此目的，该数组的长度与posts数组的长度相同...

formsArr = [];

constructor(private fb: FormBuilder) { }

ngOnInit() {
  this.posts.forEach((x) => {
    this.formsArr.push(this.fb.group({
      comment: this.fb.control('', [Validators.required, Validators.minLength(2)])
    }))
  })
}

然后在模板中迭代formsArr。您可能需要访问posts数组中的某些内容...因此我们在迭代中添加了索引，因此您可以使用post访问特定的posts[i]。还要从您的表单中删除method="post"：

<div *ngFor="let a of formsArr; let i = index">
  <form [formGroup]="a" (ngSubmit)="onSubmit(a.value, posts[i].user_id)">
    <input formControlName="comment" />
    <small *ngIf="a.hasError('minlength', 'comment') && a.get('comment').touched">
      Needs to be 2 letters
    </small>
    <button type="submit" [disabled]="!a.valid">Comment</button>
  </form>
</div>

StackBlitz

角反应形式验证* ngFor中的动态形式

1 个答案: