nb-option ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'setDisabled: false'. Current value: 'setDisabled: true'.

[jagabs]

type is nb-select
<nb-select outline shape="rectangle"  placeholder="Transaction Type" formControlName="type" style="width: 100%">
              <nb-option value="Loan">Loan</nb-option>
              <nb-option value="Payment">Payment</nb-option>
</nb-select>


const typeValueChanges$ = this.transactionForm.controls['type'].valueChanges;
		typeValueChanges$.subscribe((value) => {
			if (value === 'Payment') {
				this.transactionForm.get("paymentType").setValue('Cash');
				this.transactionForm.get("paymentType").setValidators(Validators.required);
			} else {
				this.transactionForm.get("paymentType").setValue(null);
				this.transactionForm.get("paymentType").setValidators(null);
				this.transactionForm.get("paymentType").setErrors(null);
			}
			this.transactionForm.updateValueAndValidity();
		});

When i change the type to payment the first time, no error. Change to Loan and to payment again it gives me this error.

[QuantalDingo]

I had the same problem. There are some problems with destroying elements like nb-select and nb-checkbox because of value in control changes after nb-select destroyed. You can temporary change this.cd.detectChanges() in select.component.js on
if(!this.cd['destroyed']) { this.cd.detectChanges(); }

[yggg]

Thanks for reporting! Fix is planned for 3.4.2 (PR #1329).
For now you can prevent error by recreating control instead of setting new value.
Something like this:

if (value === 'Payment') {
  this.transactionForm.removeControl('paymentMethod');
  this.transactionForm.addControl('paymentMethod', new FormControl('Cash', Validators.required));
} else {
  this.transactionForm.removeControl('paymentMethod');
  this.transactionForm.addControl('paymentMethod', new FormControl(null));
}