Как установить установленную по умолчанию радиокнопку и узнать, какая радиокнопка выбрана из радиогруппы в реактивной форме? - PullRequest
Новая
       17

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

1 голос
/ 30 апреля 2019

Я создал группу радиокнопок. Я хочу установить радиокнопку по умолчанию «флажок», и всякий раз, когда динамически нажимаются другие радиокнопки, как я могу зафиксировать, какую радиокнопку. Так, чтобы я мог соответственно использовать ее в моих условных выражениях в моей машинописи. Тег «CHECKED» не будет работать 

<form [formGroup]="Form">
  <div class="bx--row">
    <fieldset class="bx--fieldset">
      <legend class="bx--label">HEYHELLOWORLD</legend>
      <div class="bx--form-item">
        <div class="bx--radio-button-group ">
          <input id="radio-button-1" class="bx--radio-button" type="radio" formControlName="selectedOption"
            value="0" checked>
          <label for="radio-button-1" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            HEY<br>
          </label>
          <input id="radio-button-2" class="bx--radio-button" type="radio" formControlName="selectedOption"
            value="1" tabindex="0">
          <label for="radio-button-2" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            HELLO<br>
          </label>
          <input id="radio-button-3" class="bx--radio-button" type="radio" formControlName="selectedOption"
            value="2" tabindex="0">
          <label for="radio-button-3" class="bx--radio-button__label">
            <span class="bx--radio-button__appearance"></span>
            WORLD
          </label>
        </div>
      </div>
    </fieldset>
  </div>
</form>

Выше моя часть HTML с реактивной формой TS: 

    heyForm() {
      this.Form = this.formBuilder.group({
          selectedOption: ["", Validators.required],
      });
    }

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

1 Ответ

2 голосов
/ 30 апреля 2019

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

this.form = this._fb.group({
    selectedOption: ["1", Validators.required], // this will make the second radio button checked as default.
});

Если вы хотите получить доступ к тому, какая кнопка переключателя была нажата, вы можете сделать это с помощью: 

this.form.get('selectedOption').value

Имеет функцию извлечения указанного выше значения для события (change) по радиокнопкам.

Например: 

<input (change)="foo()" id="radio-button-1" class="bx--radio-button" type="radio" formControlName="selectedOption" value="0">
// inside the method foo() check for the currently selected radio button

См. Пример здесь: https://stackblitz.com/edit/angular-kw8bhf

...