如何有条件地为angular中的特定字段添加mydatepicker prop

npm install ngx-mydatepicker --save

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgxMyDatePickerModule } from 'ngx-mydatepicker';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    NgxMyDatePickerModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { IMyDpOptions } from 'ngx-mydatepicker';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myForm: FormGroup;
  showDatePicker: boolean = true; // 条件变量

  myDatePickerOptions: IMyDpOptions = {
    dateFormat: 'dd.mm.yyyy',
  };

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      dateField: [null]
    });
  }

  toggleDatePicker() {
    this.showDatePicker = !this.showDatePicker;
  }
}

<div [formGroup]="myForm">
  <div *ngIf="showDatePicker">
    <ngx-my-date-picker name="mydate" [options]="myDatePickerOptions" formControlName="dateField"></ngx-my-date-picker>
  </div>
  <div *ngIf="!showDatePicker">
    <input type="text" formControlName="dateField" placeholder="Enter date manually">
  </div>
</div>

<button (click)="toggleDatePicker()">Toggle Date Picker</button>