Получить данные из флажков в форме

Question

Моя проблема в том, что у меня есть форма, и когда пользователь отправляет форму, я хочу получить данные, которые пользователь отправил. Эти данные должны быть обернуты в один объект. Я использую formBuilder в Angular, но кажется, что в основном можно получить данные с помощью formBuilder из тегов <input> (цитата из верхнего ответа в этого поста: "formControlName работает только наinput, select и textarea. все, что имеет свойство "value". "

Я определил форму в своем конструкторе и инициализированных полях, используя formBuilder;

component.ts

constructor(private formBuilder: FormBuilder,
) {
  this.checkoutForm = this.formBuilder.group({
    selectedAccount: '',
    selectedContactInfo: '',
  });
}

В моем html у меня есть два места, где пользователь должен что-то выбрать: выпадающее меню и выбор флажков. selectedAccount из моего конструктора применяетсяна <mat-select>, который работает нормально; при отправке формы я вижу, какую учетную запись я выбрал. Однако кажется, что я не могу применить formControlName="selectedContactInfo" к div в области флажков; он возвращает пустую строку.

component.html

<!-- DROPDOWN - WORKS PERFECT -->
<mat-form-field>
  <mat-label>CHOOSE ACCOUNT</mat-label>
  <mat-select formControlName="selectedAccount">
    <mat-option *ngFor="let account of accounts" [value]="account.name">{{account.name}}</mat-option>
  </mat-select>
</mat-form-field>

<!-- CHECKBOXES - DOESN'T RETRIEVE DATA WHEN FORM IS SUBMITTED -->
h2 class="mat-h2">CHOOSE TELEPHONE NUMBERS WE CAN CONTACT YOU ON</h2>
<div formControlName="selectedContactInfo" class="item-container">
  <mat-checkbox>{{contactInfo.privateMobile}}</mat-checkbox>
  <mat-checkbox>{{contactInfo.workMobile}}</mat-checkbox>
</div>

Из флажков я хочу получить фактические данные. Поэтому, если первый флажок был установлен, я хочу получить любые данныечто contactInfo.privateMobile содержит, вероятно, строку или целое число из 8 цифр, и присваивает ей значение selectedContactInfo в конструкторе, точно так же, как я сделал для selectedAccount и выпадающего меню.

Я хочу selectedContactInfoсодержать данные для флажков;если оба проверены, он возвращает номера мобильных телефонов для обоих. Если флажок установлен, он возвращает это число и т. Д. Я также пытался использовать selectedContactInfo: [] в конструкторе, поскольку он должен возвращать данные для всех флажков, но сейчас он просто возвращает ноль.

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

Редактировать : Для справки (если кто-то хочет это знать), именно так я проверяю данные, когда отправляю свою форму, чтобы увидеть, содержит ли она правильную информацию. Не знаю, если это уместно:

onSubmit(userData) {
  console.log(userData);
}

Answer 1

Пожалуйста, проверьте этот пример

@Component({
  template: `
    <form [formGroup]="form">
      <input type="checkbox" formControlName="rememberLogin"> Remember login
    </form>
    <p>Form value: {{ form.value | json }}</p>  
    <!-- {rememberLogin: true } -->
  `,
})
export class App {
  constructor(public fb: FormBuilder) {
    this.form = this.fb.group({
        rememberLogin: [true]
    });
  }  
}

Answer 2

Проблема

Требуемый вывод представляет собой массив чисел, в то время как выборка вернет true или false, поскольку это флажок. В подобных ситуациях, когда форма содержит значения, отличные от желаемых, вы можете использовать valueChanges, чтобы обнаружить изменения в определенном FormControl и извлечь желаемый результат из FormControl или FormArray.

Решение

Поскольку вам нужен массив, первое, что вам нужно сделать, это создать FormArray для selectedContactInfo.

contactInfo = {
    privateMobile: 1800124152,
    workMobile: 1800124124
};

this.checkoutForm = this.formBuilder.group({
    selectedAccount: '',
    selectedContactInfo: this.formBuilder.array(Object.keys(this.contactInfo).map(key => false))
});

Обратите внимание, что мы инициализируем FormArray используя contactInfo. Это в основном получит ключи от объекта и создаст массив одинаковой длины со значениями false (поскольку изначально значениями флажков являются false). Конечно, если вам нужно, чтобы он был отмечен по умолчанию, вам необходимо сопоставить выбор с флажками, но для примера мы начнем со всех значений false.

Регистрация FormArray в шаблоне

Установите FormArrayName в шаблоне, чтобы мы получили доступ к значениям true / false из флажка. Используйте KeyValuePipe , поскольку мы выполняем итерацию по contactInfo, который является объектом.

<div class="item-container" formArrayName="selectedContactInfo">
    <ng-container *ngFor="let contactNumber of contactInfo | keyvalue; let i = index">
        <mat-checkbox [formControlName]="i">{{contactNumber.value}}</mat-checkbox>
    </ng-container>
</div>

Отображение массива FormArray в valueChanges

Теперь,selectContactInfo будет массивом значений true / false в соответствии с выбором флажков. Это не то, что нам нужно, поэтому мы подпишемся на valueChanges, отобразим данные на contactInfo и сохраним их в переменной с именем selectedContactInfo (обратите внимание, что это отличается от FormArray).

const control = this.checkoutForm.controls.selectedContactInfo;
this.subscription = control.valueChanges.subscribe(value => {
    this.selectedContactInfo = Object.keys(this.contactInfo).map((contactNo, index) => 
        control.value[index] ? this.contactInfo[contactNo] : null
    )
    .filter(contactNo => !!contactNo);
});

То, что мы делаем здесь, - это получение массива true / false из FormArray и его отображение в contactInfo. Если значение флажка true, верните число, иначе верните null. Затем используйте filter для фильтрации значений null.

Не забудьте отписаться от подписки valueChanges.

ngOnDestroy() {
    this.subscription.unsubscribe();
}

Пример StackBlitz

Answer 3

Он не возвращает данные, потому что вам нужно добавить formControlName для самого флажка, вы не можете добавить его в div. Просто добавьте две контактные информации и затем используйте те, у которых есть значения, или вы можете просто удалить пустую информацию из объекта.