Как добавить проверку в FormArray onSubmit () в угловых 6 - PullRequest
Новая
       32

Как добавить проверку в FormArray onSubmit () в угловых 6

0 голосов
/ 11 сентября 2018

Я просмотрел все ответы в stackOverflow и в Интернете.

У меня есть решение только для FormArray с FormGroup , но я хочу сохранить данные только в FormArray

WorkId:["a","b","c"]

и данные, которые я получаю от сервера, также в вышеуказанном формате

, и это мой код 

WorkIDList: this.formBuilder.array([
  this.formBuilder.control(""), Validators.required
], Validators.required);

get WorkIDlist() {
  return this.registerForm.get("WorkIDList") as FormArray;
}
addworkidlist() {
  this.WorkIDlist.push(this.formBuilder.control(""));
}
submit(data, event: Event) {
  this.submitted = true;
  if (this.registerForm.invalid) {
    this.validateAllFields(this.registerForm);
    return;
    // alert("all fields must be filled");
  } else {
    event.preventDefault();
    console.log("data", data);
  }
}
// validation on submit

validateAllFields(formGroup: FormGroup) {
  Object.keys(formGroup.controls).forEach(field => {
    const control = formGroup.get(field);
    if (control instanceof FormArray) {
      control.markAsTouched();
    }
    if (control instanceof FormControl) {
      control.markAsTouched({
        onlySelf: true
      });
    } else if (control instanceof FormGroup) {
      this.validateAllFields(control);
    }
  });
}
<div class="form-group">
  <div class="col-sm-9" formArrayName="WorkIDList">
    <div *ngFor="let address of WorkIDlist.controls; let i=index">
      <input class="form-control workIdList" type="text" [formControlName]="i" required />
      <!-- <div *ngIf="address.invalid && (address[i].dirty || address[i].touched)"
                    class="alert alert-danger">
                    <div *ngIf="address[i].errors.required">
                      WorkspaceName is required.
                    </div>
                  </div> -->
      <div *ngIf="address[i].invalid">
        <div *ngIf="address.hasError('required')">
          Error
        </div>
      </div>
    </div>
    <button type="button" (click)="addworkidlist()">Add</button>
  </div>
</div>

Я не могу дать подтверждение в html и не могу выдать подтверждение ошибки на submit() через скрипт

Может кто-нибудь помочь в этомвыпуск.

Заранее спасибо.

1 Ответ

0 голосов
/ 11 сентября 2018

Я нашел решение для проверки в HTML и машинописи 

validateAllFields(formGroup: FormGroup) {
  Object.keys(formGroup.controls).forEach(field => {
    const control = formGroup.get(field);
    if (control instanceof FormArray) {
      for (const control1 of control.controls) {
        if (control1 instanceof FormControl) {
          control1.markAsTouched({
            onlySelf: true
          });
        }
        if (control1 instanceof FormGroup) {
          this.validateAllFields(control1);
        }
      }
      // control.markAsTouched();
    }
    if (control instanceof FormControl) {
      control.markAsTouched({
        onlySelf: true
      });
    } else if (control instanceof FormGroup) {
      this.validateAllFields(control);
    }
  });
}
<div class="form-group">
  <div class="col-sm-9" formArrayName="WorkIDList">
    <div *ngFor="let address of WorkIDlist.controls; let i=index">
      <input class="form-control workIdList" type="text" [formControlName]="i" required />
      <div *ngIf="address.invalid && (address.dirty || address.touched)" class="alert alert-danger">
        <div *ngIf="address.hasError('required')">
          WorkspaceName is required
        </div>
      </div>
    </div>
    <button type="button" (click)="addworkidlist()">Add</button>
  </div>
</div>
...