typescript - Hvordan deaktivere en formkontroll basert på verdien til en annen formkontroll rett ved initialisering i reaktive Angular-skjemaer?

Jeg har 2 skjemaelementer, ett er en rullegardinliste, det andre er et inndatafelt:

      <form  [formGroup]="timeForm">
          <div>
            <mat-form-field appearance="outline" class="fullInputWidth">
              <mat-label>Sunday</mat-label>

              <mat-select formControlName="SundayStatus">
                <mat-option value="Opened">Opened</mat-option>
                <mat-option value="Closed">Closed</mat-option>
              </mat-select>
            </mat-form-field>
          </div>

          <div>
            <mat-form-field appearance="outline" class="fullInputWidth">
              <mat-label>Opens at</mat-label>
              <input formControlName="SundayOpen" name="SundayOpen" matInput autocomplete="off" [format]="24" [ngxTimepicker]="SundayOpen" readonly > 
              <ngx-material-timepicker #SundayOpen [minutesGap]="15"></ngx-material-timepicker>
            </mat-form-field>
          </div>
       </form>

Inne i komponenten min har jeg:

  this.timeForm = this.formBuilder.group({
      SundayStatus: ['Closed'],
      SundayOpen: [''] 
}):

Så jeg vil deaktivere formkontrollen 'SundayOpen' når verdien av kontrollen 'SundayStatus' er 'Closed'.

Nå er problemet at verdien av 'SundayStatus' allerede er initialisert til 'Closed'.

Hvis jeg legger denne koden på input #SundayOpen:

[disabled]="timeForm.get('SundayStatus').value == 'Closed'"

Det deaktiverer ikke kontrollen første gang, men fungerer når jeg endrer rullegardinverdien til 'Åpnet' ==> 'Lukket'

Hjelp!

Svar #1

Du må lytte til valueChanges:

const sundayStatusControl = this.timeForm.get('SundayStatus');
sundayStatusControl.valueChanges.pipe(
  takeUntil(this._ngOnDestroy$)
).subscribe(newStatus => {
  if (newStatus === 'Closed') {
    this.timeForm.get('SundayOpen').disable();
  } else {
    this.timeForm.get('SundayOpen').enable();
  }
});
sundayStatusControl.updateValueAndValidity();

Hvis du har 7 formkontroller, kan du gruppere dem i en løkke:

const days = [
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thirsday',
  'Friday',
  'Saturday',
  'Sunday'
]
for (const day of days) {
  const control = this.timeForm.get(`${day}Status`);
  control.valueChanges.pipe(
    takeUntil(this._ngResetForm$)
  ).subscribe(newStatus => {
    if (newStatus === 'Closed') {
      this.timeForm.get(`${day}Open`).disable();
    } else {
      this.timeForm.get(`${day}Open`).enable();
    }
  });
  control.updateValueAndValidity();
}

Relaterte artikler