मुझे यकीन है कि यह आसान है। मेरे पास यह एचटीएमएल है:

<form [formGroup]="formGroup">
    <mat-form-field class="form-group" appearance="outline">
        <mat-label>Choose your start date</mat-label>
        <input matInput formControlName="startDate" aria-label="startDate"
            [matDatepicker]="start">
        <mat-datepicker-toggle matSuffix [for]="start"></mat-datepicker-toggle>
        <mat-datepicker #start></mat-datepicker>
    </mat-form-field>

    <mat-form-field class="form-group" appearance="outline">
        <mat-label>End date</mat-label>
        <input matInput formControlName="endDate" aria-label="endDate" [matDatepicker]="end">
        <mat-datepicker-toggle matSuffix [for]="end"></mat-datepicker-toggle>
        <mat-datepicker #end></mat-datepicker>
    </mat-form-field>

    <div class="form-group">
        <mat-slide-toggle formControlName="rolling">Continue until further notice?
        </mat-slide-toggle>
    </div>
</form>

मैं केवल endDate को सक्षम करने का प्रयास कर रहा हूं यदि rolling को off टॉगल किया जाता है।

मैंने इसे इस तरह करने की कोशिश की है:

public formGroup: FormGroup;
public subscription: Subscription;

// convenience getter for easy access to form fields
get f() {
  return this.formGroup.controls;
}

constructor(
  private formBuilder: FormBuilder
) {}

ngOnInit(): void {
  this.createForm();
}

private createForm(): void {
  this.formGroup = this.formBuilder.group({
    startDate: new FormControl(
      this.subscription.startDate,
      Validators.required
    ),
    rolling: this.subscription.rolling,
  });
  this.formGroup.addControl(
    'endDate',
    new FormControl({
      value: this.subscription.endDate,
      disabled: this.f.rolling.value === true,
    })
  );
}

लेकिन जब मैं स्लाइडर को टॉगल करता हूं, कुछ नहीं होता है। इनपुट हमेशा अक्षम रहता है। क्या किसी को पता है क्यों?

1
r3plica 22 जिंदा 2021, 18:48

2 जवाब

सबसे बढ़िया उत्तर

उदाहरण पुन: प्रस्तुत और हल किया गया: https:// stackblitz.com/edit/angular-ivy-h4wyta?file=src/app/app.component.ts

disabled: this.f.rolling.value === true

बस यह काम नहीं करेगा। आपको टॉगल पर परिवर्तनों का पता लगाना होगा।

सबसे पहले फॉर्म इनिशियलाइज़ेशन को सरल बनाएं।

this.formGroup = this.formBuilder.group({
   startDate: new FormControl(this.testObject.startDate, Validators.required),
   endDate: new FormControl(this.testObject.endDate, Validators.required),
   rolling: this.testObject.rolling
});

और इस मुद्दे को हल करने के दो तरीके हैं।

  1. फॉर्मकंट्रोल के वैल्यू चेंज इवेंट की सदस्यता लें।
  2. MatSlideToggle के ऑनचेंज इवेंट की सदस्यता लें।

रास्ता 1:

this.formGroup.get("rolling").valueChanges.subscribe(value => {
   this.rollingChanged(value);
});

रास्ता 2:

onChange() {
   const value = this.formGroup.get("rolling").value;
   this.rollingChanged(value);
}

फिर आपको डिसेबल का काम करना है।

rollingChanged(value: boolean) {
    const control = this.formGroup.get("endDate");
    if (value) {
      control.reset();
      control.clearValidators();
      control.disable();
    } else {
      control.enable();
      control.setValidators([Validators.required]);
    }
}
1
Zunayed Shahriar 23 जिंदा 2021, 16:49

चूंकि rolling फॉर्म का हिस्सा है, आप नीचे की तरह लिख सकते हैं और कोशिश कर सकते हैं:

this.formGroup = this.formBuilder.group({
    startDate: new FormControl(
      this.subscription.startDate,
      Validators.required
    ),
    rolling: new FormControl(this.subscription.rolling)
  });

मुझे लगता है कि आप rolling के लिए new FormControl() का उल्लेख करना भूल गए हैं।

0
NRP 22 जिंदा 2021, 19:16