Как динамически изменять содержимое в div с помощью переключателя? - PullRequest
Новая
       21

Как динамически изменять содержимое в div с помощью переключателя?

0 голосов
/ 21 июня 2019

Я пытаюсь создать форму, которая будет принимать информацию о планировании, которая потенциально может быть представлена ​​в нескольких различных форматах (еженедельно, ежемесячно и т. Д.). Я планировал иметь раздел расписания в форме, где пользователь выбирает тип расписания с помощью группы переключателей. Если выбран вариант «Еженедельно», появится группа флажков с днями недели, чтобы вы могли выбрать дни недели. если ежемесячно, то можно выбрать день месяца и т. д. Я попытался использовать способ отображения * ngIf, но он не работает, и я не получаю сообщений об ошибках. Есть идеи, как это реализовать?

Я использую: -Угловые элементы материала -Ангуляр 2 (8) -Ангулярные реактивные формы

У меня уже есть часть этого, ниже приведен код переключателей и первая часть расписания, которую я хочу скрыть (извиняюсь за плохое форматирование кода, все еще вычисляя переполнение стека): 

<form [formGroup] = "SchedInfo" (ngSubmit)="onSubmit()">


<mat-radio-group formControlName= "sType" (ngSubmit)= "onSubmit()">
<mat-radio-button type="radio"  [value] ="true" [checked] = "value">Weekly</mat-radio-button>
<mat-radio-button type="radio"  [value] ="false" [checked] = "!value">Monthly</mat-radio-button>
</mat-radio-group>

<div class = "weeklyS" *ngIf= "sType.value">
<br>
<!-- possibly need to resturcture the section below -->
<mat-checkbox formControlName= "mo">Monday</mat-checkbox>
<mat-checkbox formControlName= "tu">Tuesday</mat-checkbox>
<mat-checkbox formControlName= "we">Wednesday</mat-checkbox>
<mat-checkbox formControlName= "th">Thursday</mat-checkbox>
<mat-checkbox formControlName= "fr">Friday</mat-checkbox>
<mat-checkbox formControlName= "sa">Saturday</mat-checkbox>
<mat-checkbox formControlName= "su">Sunday</mat-checkbox>
</div>


В конце концов, моя цель для этого - иметь модуль расписания, который можно переключать между несколькими различными методами ввода.

Также:

должен ли я иметь один div, который заполняется при каждом изменении выбора, или я должен иметь несколько div, которые отображаются / скрываются в зависимости от выбора?

1 Ответ

0 голосов
/ 21 июня 2019

Что вам действительно нужно сделать, это правильно связать значение вашего радио и как вернуть значение.Это был самый простой пример, который я мог придумать.

Сначала наш код шаблона 

<form [formGroup]="myForm" (submit)="onSubmit(myForm.value)" novalidate>
    <label id="example-radio-group-label">Pick your Type</label>
<mat-radio-group class="example-radio-group" formControlName="sType">
  <mat-radio-button class="example-radio-button" *ngFor="let sfType of scheduleTypes" [value]="sfType">
    {{sfType}}
  </mat-radio-button>
</mat-radio-group>


<ng-container [ngSwitch]="getScheduleType()">
<div  *ngSwitchCase="'Weekly'">
  Weekly Content
</div>
<div *ngSwitchCase="'Monthly'">
  Monthly Content
</div>
</ng-container>

</form>

Теперь код компонента: 

   import { Component, OnChanges, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';


export interface DataModel {
  sType: string;
}
/**
 * @title Radios with ngModel
 */
@Component({
  selector: 'radio-ng-model-example',
  templateUrl: 'radio-ng-model-example.html',
  styleUrls: ['radio-ng-model-example.css'],
})
export class RadioNgModelExample {
  myForm: FormGroup;

//List of the schedule types. You might want to change this to an ENUM
  scheduleTypes: string[] = ['Weekly', 'Monthly'];

  constructor(private formBuilder: FormBuilder) {
    this.buildForm();
  }

//Remember to build your form properly
  public buildForm() {
    this.myForm = this.formBuilder.group({
      sType: [null]
    });
  }

  public onSubmit(data: DataModel) {
    //Submit Data Here
  }

  public getScheduleType() {
    //Get the value of your stypeControl
    return this.myForm.controls['sType'].value;
  }


}

Live Example

...