Angular2 Реактивные формы formControl для переключателей

Ответ 1

Должен ли я делать <input formControlName="gender" type="radio"> так же, как и при вводе текста?

Да.

Как это работает?

Директивы управления формами используют директиву ControlValueAccessor для связи с собственным элементом. Существуют разные типы ControlValueAccessors для каждого из возможных входов. Правильный выбирается директивой selector директивы access access. Селекторы основаны на том, что type <input>. Когда у вас есть type="radio", тогда будет использоваться аксессуар для радиостанций.

Ответ 2

В своем компоненте определите свой радиокнопку как часть вашей формы:

export class MyComponent {
  form: FormGroup;
  constructor(fb: FormBuilder){
    this.form = fb.group({
      gender: ""
    });
  }
}

В HTML-компоненте компонента создайте форму:

<div class="form-group">
  <label>Please select your gender</label>
  <div class="row">
    <label class="md-check">
      <input type="radio" value="female" name="gender" formControlName="gender">
      Female
    </label>

    <label class="md-check">
      <input type="radio" value="male" name="gender" formControlName="gender">     
      Male
    </label>
  </div>
</div>

Я предполагаю, что вы знаете, как построить всю форму с помощью кнопки отправки, которая здесь не показана.

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

let genderValue = this.form.value.gender;

Это будет либо "женский", либо "мужской", в зависимости от того, какой переключатель установлен.

Надеюсь, это поможет вам. Удачи!

Ответ 3

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

  this.jobForm = this._fb.group({
                    id: [res["job"]["id"]],
                    job_status: [res["job"]["job_status"]**["id"].toString()**,Validators.required],
                    title: [res["job"]["title"],Validators.required]
                });

Ответ 4

Angular Элементы управления материалом (в основном) достаточно зрелые, чтобы использовать их сейчас.

В их образцах в основном используется ngModel, но здесь вы можете сделать это с помощью formControlName.

<mat-radio-group formControlName="colorFilter" fxLayout="column" fxLayoutGap=".25rem">
    <mat-radio-button [value]="'Blue'">Blue things</mat-radio-button>
    <mat-radio-button [value]="'Red'">Red things</mat-radio-button>
    <mat-radio-button [value]="'Orange'">Orange things</mat-radio-button>
</mat-radio-group>

Я использую angular/flex-layout, чтобы поместить мои кнопки в вертикальный столбец.

(Можно также сделать value='Blue' для константы или [value]="blueColorName" для ссылки на свойство модели.

Я считаю, что проблема с 0 может быть проблемой, потому что это не "правдивое" значение, поэтому следите за тем, привязаны ли вы к перечислениям (это уже не проблема).