typescript - گرفتن همه کنترلهای فرم Angular که از حالت فعال به غیرفعال تغییر کردهاند، یا برعکس؟

خلاصه؛ یک FormGroup زمانی که یک FormControl تو در تو از حالت غیرفعال به فعال یا برعکس تغییر میکند، کثیف در نظر گرفته نمیشود.

جزئیات; یک روش خوب برای بهدست آوردن تمام کنترلهای فرم که به یک FormGroup تعلق دارند و وضعیت آنها از فعال به غیرفعال یا بالعکس تغییر کرده است، چیست؟

همانطور که این Stackblitz نشان میدهد، ویژگیهای pristine، dirty، touched و untouched زمانی که یک کنترل از فعال به غیرفعال تغییر میکند یا بالعکس، بدون تغییر باقی میمانند.

export class AppComponent implements OnInit {
  person: FormGroup;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.person = this.fb.group({
      name: this.fb.control(''),
      age: this.fb.control(100),
    });
  }
}

تایپاسکریپت بالا یک FormGroup واحد (person) با دو FormControl (name و age) تعریف میکند.

HTML زیر اجازه میدهد که کنترل name با کلیک روی یک دکمه فعال یا غیرفعال شود. برخی ویژگیها نیز نمایش داده میشوند.

<form [formGroup]="person">
    <input type="text" placeholder="Name" formControlName="name">
    <button (click)="person.controls['name'].disable()">Disable</button>
    <button (click)="person.controls['name'].enable()">Enable</button>
    <br />
    <br />
    <input type="text" placeholder="Age" formControlName="age">
</form>

<pre>{{person.value | json}}</pre>

disabled: {{ person.disabled }}<br />
pristine: {{ person.pristine }}<br />
dirty: {{ person.dirty }}<br />
touched: {{ person.touched }}<br />
untouched: {{ person.untouched }}<br />

من انتظار داشتم تشخیص اینکه یک کنترل هنگامی که است آسان باشد:

• فعال شد (جایی که قبلاً غیرفعال بود)
• غیرفعال (جایی که قبلاً فعال بود)

بر خلاف ویژگیهای دستنخورده، کثیف، لمسشده و دستنخورده، وضعیت فعال و غیرفعال به نظر گذرا میرسد.

به نظر میرسد هیچ ویژگی از یک FormGroup وجود ندارد که نشان دهد آیا کنترلهای فرزند از وضعیت اولیه خود فعال یا غیرفعال شدهاند؟ FormGroup همچنان دستنخورده و پاک باقی میماند.

پیشنهاد شده است که از statusChanges استفاده شود. با این حال، این تنها چهار مقدار ممکن برای وضعیت اعتبارسنجی را ارائه میدهد (VALID، INVALID، PENDING، DISABLED). راه روشنی برای نگاشت وضعیت به یک کنترل و سپس تعیین اینکه آیا از فعال به غیرفعال تغییر کرده است یا بالعکس وجود ندارد. من یک Stackblitz دیگر برای نمایش این موضوع ایجاد کردهام.

ویرایش

من یک باگ باز کردهام: FormGroup زمانی که یک FormControl تو در تو از حالت غیرفعال به فعال یا بالعکس تغییر میکند، dirty نمیشود.

پاسخ شماره ۱

میتوانید سعی کنید برای تغییر وضعیت کنترل گوش دهید - یکی از آنها غیرفعال است

https://angular.io/api/forms/AbstractControl#status

https://angular.io/api/forms/AbstractControl#statusChanges

ویرایش :

یک روش واضح برای این وجود دارد، اما به آن registerOnDisabledChange گفته میشود

https://angular.io/api/forms/FormControl#registerOnDisabledChange

نسخه فورک شده خود را از stackblitz نمایش دهید https://stackblitz.com/edit/formbuilder-soydhk

اگر نیاز دارید که در سطح کنترل برای آن گوش دهید، هیچ چیزی مانع شما برای نوشتن شنونده تجمیعی نمیشود.