Проверка угловых реактивных форм для динамических форм внутри * ngFor - PullRequest
Новая
       4

Проверка угловых реактивных форм для динамических форм внутри * ngFor

0 голосов
/ 15 февраля 2019

Я новичок в angular, когда пытался поместить проверку формы в текстовое поле, присутствующее внутри цикла *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)]]
    });
  }

1 Ответ

0 голосов
/ 15 февраля 2019

Ваши 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

...