coreui / coreui-free-angular-admin-template

CoreUI Angular is free Angular 18 admin template based on Bootstrap 5

Home Page:http://coreui.io/angular/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

This thign is frustrating to say the least

Porkechebure opened this issue · comments

disabled not working on cfromcontrols and form are troublesome and lack events.

Don't even have time to write everything I found...
damn

just put substantial code samples of how it works

Wich doesn't mean for example in a form doing this crap:
https://coreui.io/angular/docs/forms/form-control#disabled

HEY HERE'S YOUR CODE:
m-control03.component.html

<input aria-label="Disabled input example"
       cFormControl
       disabled
       placeholder="Disabled input"
       type="text">
   And that's it.
   
   You gotta show how to trigger them by code in a proper way
   
   
   
   For example:
       
       <c-form-check [switch]="true">
            <input cFormControl 
            [disabled]="true"
            [readOnly]="true" formControlName="invoiceGiveAllCredit" cFormCheckInput type="checkbox"/>
            <label cFormCheckLabel>Copri intero importo</label>
          </c-form-check>
          
      This does absolutely nothing
      
      But manually adding "disabled" through Developer Tools in Chrome does the work so clearly something is not working
      
      In your template code you just do
          
              flexCheckGroupDisabled: this.formBuilder.group({
      checkThree: [{ value: false, disabled: true }],
      checkFour: [{ value: true, disabled: true }]
    }),

And we have to live up to that and guess how to do it programmatically, since any normal angular way doesn't work

For example:

      <div class="col-4 mb-3">
      <c-form-check [switch]="true">
        <input cFormControl 
        [disabled]="true"
        [readOnly]="true" formControlName="invoiceGiveAllCredit" cFormCheckInput type="checkbox"/>
        <label cFormCheckLabel>Copri intero importo</label>
      </c-form-check>
      
      
         this.disableCreditInput = true;
    this.invoiceValidationForm.controls.invoiceCreditToGive.patchValue(this.invoiceToPay?.testata?.importoFattura);
 
 
 doesn't do shit.
 
 Fix this damn thing or show working example

And not only, the whole fucking form experience, from validation to disabled and such is BROKEN to the bone.

I wrote a simple form:

image

Anything is working. Even if I take off of the equation the disabled and readonly properties.

text input results blocked and switch never gets disabled even if set explicitly.

I Imported the same exact modules you do in your example.

FIX THIS THING

image

Html looks fine but this thing doesn't work as expected

Dear @Porkechebure

Thanks for your question. However, we kindly request that you refrain from using offensive language here. It will not help in any way.

You mentioned that the normal Angular way doesn’t work. It's possible that your issue may be related to a lack of familiarity with Angular and how it interacts with HTML attributes like disabled. See: https://angular.io/guide/binding-syntax#property-and-attribute-comparison

Additionally, you mentioned being unsure about why 'formGroup / controlsConfig' is defined in this manner. If you take some time to explore the Angular documentation, particularly the section on Reactive Forms, how operate FormGroup, FormControl with FormControlState, you may find the answers you're looking for and overcome the challenges and frustration you're facing.

Anyway, look at your console:

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid 'changed after checked' errors.

Example:

  // Specify the `disabled` property at control creation time:
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

  // Controls can also be enabled/disabled after creation:
  form.get('first')?.enable();
  form.get('last')?.disable();