Как скрыть указатель даты при выборе радиокнопки? - PullRequest
Новая
       7

Как скрыть указатель даты при выборе радиокнопки?

0 голосов
/ 25 октября 2019

Итак, у меня есть DatePicker и радио-кнопка. Я хочу скрыть средство выбора даты, когда выбрана радиокнопка.

, поэтому это средство выбора даты: 

     <div formGroupName="groupDateTwo">
            <mat-form-field class="search-field-input md-datepicker-input-container">
              <input
                matInput
                readonly
                required
                [matDatepicker]="picker2"
                placeholder="start datum"
                formControlName="startDate"
                (ngModelChange)="onChange($event)"
              />
              <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
              <mat-datepicker #picker2></mat-datepicker>
            </mat-form-field>
          </div>

, и это когда переключатель выбран: 


if (optionLabel === 'Registratie') {   


    }

и это поле даты: 

startDate: Date;

Итак, мой вопрос, можете ли вы скрыть средство выбора даты, когда переключатель выбран в сценарии ts?

Спасибо

Ответы [ 2 ]

1 голос
/ 25 октября 2019

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

showDatePicker: boolean = true;

И в хуке выбора переключателя назначьте true вышеупомянутому свойству с привязкой к данным. 

if (optionLabel === 'Registratie') {   
   this.showDatePicker = false;
}

И, наконец, в html вашего компонента используйте *ngIf="expression" или [hidden]="expression"

<mat-form-field class="search-field-input md-datepicker-input-container" *ngIf="showDatePicker">
  ...
</mat-form-field>
0 голосов
/ 25 октября 2019 
<ng-template [ngIf]="optionLabel=='Registratie'">
 <mat-form-field class="search-field-input md-datepicker-input-container">
          <input
            matInput
            readonly
            required
            [matDatepicker]="picker2"
            placeholder="start datum"
            formControlName="startDate"
            (ngModelChange)="onChange($event)"
          />
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
    <mat-datepicker #picker2></mat-datepicker>
  </mat-form-field>
</ng-template>

это означает, что если optionLabel == 'Registratie', тогда будет отображаться средство выбора даты

...