Флажки перечисляют значения в форме

Я новичок в Angular 2, поэтому мне понадобится ваш совет для достижения развития. Я работаю над компонентом формы создания/обновления. У меня есть список флажков со значениями по умолчанию (проверено или нет, это зависит от службы). Вот мой код:

@Component({
  selector: 'app-campaign',
  template: `
  <form [formGroup]="campaignForm" (ngSubmit)="saveCampaign()" novalidate>
    <label for="formations">Formations</label>
    <ul *ngFor="let formation of formations">
      <li>
        <label>
          <input 
            type="checkbox" 
            [attr.checked]="formation.formationCochee == 1 ? 'checked' : null">
            {{formation.formation}}
        </label>
      </li>
    </ul>
    <input 
      type="submit" 
      class="btn btn-primary" 
      value="Save" 
      [disabled]="campaignForm.invalid"/>
  </form
  `,
  styleUrls: ['./campaign.component.css'],
  providers: [CampaignService, FormationService]
})
export class CampaignComponent implements OnInit {

  id: number = 0;
  campaignForm: FormGroup;        
  title: string = "New campaign";
  errorMessage: any;
  formations: Formation[];

  constructor(
    private _fb: FormBuilder,
    private _campaignService : CampaignService,
    private _formationService: FormationService
    ) { 
      this.campaignForm = this._fb.group({  
        id: ''
        , description: ["", Validators.required]
        // ...
      });

      if (this._avRoute.snapshot.params["id"]) {
        this.id = parseInt( this._avRoute.snapshot.params["id"]);
      }
    }

  ngOnInit() {
    // Case : Update Form
    if(this.id > 0){ 
      this.title = 'Update';    
      this._formationService.selectedFormations(this.id)
      .subscribe(formations =>
        this.formations=formations['records']
      );
    } 
    // Case : Create Form
    else {
      this._formationService.listActiveFormations()
      .subscribe(formations =>
        this.formations=formations['records']
      );
    }
  }

  saveCampaign(){ 
    this._campaignService.saveCampaign(this.campaignForm.value)
    .subscribe(campaign => {
        this._router.navigate(['campaigns']);
     }, error => this.errorMessage = error )
  }
}

Мои вопросы :

  • Как я могу установить свои данные по умолчанию для моего списка флажков?

  • Можно ли обновить эти значения по умолчанию, когда пользователь устанавливает или снимает флажки?

  • Является ли FormArray хорошим вариантом для решения моей проблемы?

  • И, пожалуйста, дайте мне знать, если вы видите плохие привычки в моем коде, у меня нет никаких возвратов по этому поводу ... Я много прошу, но я застрял на некоторое время ...

PS: я пытаюсь сделать это без существующего компонента, чтобы улучшить свои навыки работы с angular2.

Спасибо за ваши советы


angular checkbox
person amt59    schedule 21.11.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать FormArray для этого случая, чтобы перебирать данные в formations и помещать каждый объект как FormGroup в FormArray в вашей форме.

Или вы можете просто при отправке формы заполнить свой FormArray значениями formations.

Выбирая последний вариант, вы, как и раньше, перебираете массив и отображаете флажки. Вместо [attr.checked] можно использовать [(ngModel)]. При этом вам нужно добавить [ngModelOptions]="{standalone: true}, так как это реактивная форма. Таким образом, ваш список должен выглядеть так:

<ul>
  <li *ngFor="let formation of formations">
    <label>
      <input 
        type="checkbox" 
        [(ngModel)]="formation.formationCochee"
        [ngModelOptions]="{standalone: true}">
        {{formation.formation}}
    </label>
  </li>
</ul>

Когда вы создаете форму, добавьте пустой FormArray для вашего массива:

this.campaignForm = this.fb.group({
  formations: this.fb.array([])
});

Затем, когда вы отправляете форму, вы можете заменить это пустое FormArray своим formations:

saveCampaign(){ 
  this.campaignForm.setControl('formations', this.fb.array(this.formations))
  this._campaignService.saveCampaign(this.campaignForm.value)
    .subscribe(campaign => {
       this._router.navigate(['campaigns']);
    }, error => this.errorMessage = error )
}
person AJT82    schedule 22.11.2017

arrow_upward
0
arrow_downward

  • Как установить данные по умолчанию для списка флажков?

     [attr.checked]="formation.formationCochee">

В JS у вас есть значения истина и ложь. Например, 1 является истинным значением, что означает is true. Angular поймет, что вы хотите сделать, и поставит галочку за вас.

  • Можно ли обновить эти значения по умолчанию, когда пользователь устанавливает или снимает флажки?

Нет. Если пользователь обновляет значение по умолчанию, оно больше не является значением по умолчанию! В противном случае я не понял вашего вопроса, может быть, вы могли бы перефразировать его?

  • Является ли FormArray хорошим вариантом для решения моей проблемы?

В чем именно заключается ваша проблема? Вы не указали проблему, вы только задали вопросы...

  • И, пожалуйста, дайте мне знать, если вы заметите в моем коде вредные привычки

    <ul *ngFor="let formation of formations">

Вместо этого следует повторить для тега li : тег ul/ol — это только контейнер списка, а li — элемент списка.

<label>
      <input 
        type="checkbox" 
        [attr.checked]="formation.formationCochee == 1 ? 'checked' : null">
        {{formation.formation}}
    </label>

Метка не должна не содержать ввод. Метка предназначена для описания ввода, что означает, что он может взаимодействовать с вводом с атрибутом for.

person Community    schedule 21.11.2017