Реактивная форма в угловых 4 представить массив значений флажков при нажатии кнопки - PullRequest
Новая
       50

Реактивная форма в угловых 4 представить массив значений флажков при нажатии кнопки

0 голосов
/ 27 декабря 2018

Я разрабатываю приложение на Angular 4. Я использую реактивные формы.Я создаю простую форму отправки, как показано ниже: 

<form [formGroup]="newPostForm" novalidate>

      <input formControlName="Title" type="text" class="form-control" id="txtTitle" placeholder="Enter title of post..."> 
        <h4>Categories</h4>
        <ul>
          <li *ngFor="let cat of catsList">
            <span style="margin-top: -2.5px;">
              <input id="CheckBox" type="checkbox" formNameArray="Categories" [value]='cat.CategoryID' checked='false'></span> {{cat.CategoryName}}
          </li>
        </ul>
    <input type="submit" name="btnSubmit" value="Save" id="btnSubmit" (click)="onSubmitedForm()" class="btn btn-primary">
</form>

Ниже приведен файл new-post.component.ts: 

export class NewPostComponent implements OnInit {
  public catsList: any = [];
  public newPostDTO: any = [];
  newPostForm: FormGroup;

  constructor(private _postsSvc: PostsService,
    private _categoriesSvc: CategoriesService,
    private _formGroup: FormBuilder) { }

  ngOnInit() {
    this.getAllCategories();
    this.initProperties(); //init all props
    this.createPostForm(); 
  }


  initProperties() {
    this.newPostDTO = {
      Title: null,
      Content: null,
      Categories: null
    };
  }

  createPostForm() {
    this.newPostForm = this._formGroup.group({
      Title: [''],
      Categories: new FormArray([])
    });
  }

  onSubmitedForm() {
    console.log(this.newPostForm.value.Categories);
    this.newPostDTO = {
      Title: this.newPostForm.value.Title,
      Categories:  this.newPostForm.value.Categories,
    };
    this._postsSvc.addPost(this.newPostDTO).subscribe(data => {
      if (data.status === 201) {

      }
    });
  }


getAllCategories() {
  this._categoriesSvc.getCategories().subscribe(
    data => this.catsList = data.body );
  }

} Я хочу получить все идентификаторы отмеченных категорий какмассив при нажатии на кнопку отправки.Как мне этого добиться?Я пытался, но значение массива Categories равно нулю после нажатия кнопки CLICK SUBMIT.

Спасибо всем!

1 Ответ

0 голосов
/ 27 декабря 2018

Реактивный источник управления формой - это класс, а не шаблон, поэтому, если вы хотите создать динамический флажок, вам нужно создать несколько formControl

Если вы хотите, чтобы изменения произошли только после отправки, вы можете передать{updateOn: "submit"} для получения данных только после submit 

catsList = [{cName:"cat1"},{cName:"cat2"},{cName:"cat3"}];

  newPostForm: FormGroup;
  constructor(private fb: FormBuilder) {
    const control = this.catsList.map((d)=>new FormControl())
    this.newPostForm = this.fb.group({
      Title: [''],
      Categories: new FormArray(control,{updateOn:"submit"})
    })
  }

  get catControl() {
    return this.newPostForm.get('Categories')['controls'];
  }

  onSubmitedForm() {

  }

FormArray основан на индексе, поэтому мы должны использовать индекс для отдельного formControl 

<form [formGroup]="newPostForm" > 
    <input formControlName="Title" type="text" class="form-control" id="txtTitle" placeholder="Enter title of post..."> 
        <h4>Categories</h4>
        <ul>
          <li *ngFor="let cat of catControl;let i =index">
            <span style="margin-top: -2.5px;" formArrayName="Categories">
              <input  [formControlName]="i" id="CheckBox" type="checkbox"  ></span> {{catsList[i].cName}}
          </li>
        </ul>
    <input type="submit" name="btnSubmit" value="Save" id="btnSubmit" (click)="onSubmitedForm()" class="btn btn-primary">
</form>

Пример: https://stackblitz.com/edit/angular-dzxcf1

...