How to disable button when this length satisfies

Question

How to disable the below div when this length condition satisfies. Please check and help me..

<div *ngIf="setUpWizardForm.get('projectTitle').value && slpPlat && (setUpWizardForm.get('projectTitle').value.length + slpPlat.length) > 50" >
    <span 
        class="error-message" 
        style="padding-left:15px;"
    > 
        Project Name - maximum of 50 characters allowed 
    </span>
</div>

<!-- Here want to disable that div in below button. Please help -->

<button 
    href="javascript:void(0);" 
    class="slm-user-action-btn" 
    [disabled]='setUpWizardForm.invalid || !projectNameFilled' 
    *ngIf="currentSlide==3" 
    type="button" 
    (click)="projectConfigured(templateInProcess)"
> 
    Configure
</button>

score 0 · Accepted Answer · 2022-02-25T11:10:53.013

0

To disable button when characters exceeds in projectTitle field and using suffix as slpPlat we can do in below manner :

Keep a onChange() function on your input type projectTitle. So it will be something like <input name="projectTitle" onChange="checkFieldLen()" />
Now in this function as well as on ngAfterViewInit() hook need to calculate length for the input fields.
You can access input element in your .ts file using ElementRef (How to get ElementRef reference from NgModel FormControl in NgForm in Angular 4+)
Now check the length including suffix at both the places and toggle the boolean variable to enable/disable the button

edited Feb 25 '22 at 11:10

answered Feb 25 '22 at 08:26

Actually When I type the 50 chars above, the button will disable. I wrote 50 chars condition, that one is working fine. Now I want to disable button if it is exceeds 50 chars in the above mentioned and existing code. please help – venusri Feb 25 '22 at 09:24
So what we understand is you want to disable button when characters exceeds 50 right ? – Feb 25 '22 at 09:31
yes correct. Please help – venusri Feb 25 '22 at 09:38
Can you please give some more detail(code) of setUpWizardForm and projectNameFilled so we can help in exact manner – Feb 25 '22 at 09:49
setUpWizardForm is form name and projectNameFilled-they took bolean variable for other validation.
– venusri Feb 25 '22 at 09:53
here unable to post the full code. please access me chat – venusri Feb 25 '22 at 09:54
Can you please tell your angular version.. it is 2+ right ? – Feb 25 '22 at 09:56
anguar 8 version – venusri Feb 25 '22 at 09:59
Can you please give the input field name or ngModel name in which you are writing 50 characters...as we are modifying the answer to help you in better manner.. – Feb 25 '22 at 10:20
projectTitle and slpPlat -->slpPlat is suffix name and projectTitle is input field. we need to combine these 2. wen combine these 2 not exceeds 50 char – venusri Feb 25 '22 at 10:25
Can you please refer our edited answer as to how to resolve your problem – Feb 25 '22 at 10:53
very confusing.. – venusri Feb 25 '22 at 11:19
If as an summary if you see attach the ElementRef with the input and calculate the length in ts file and based on it refer boolean variable. I hope this may help you... You can have a look at reference link added in answer. – Feb 25 '22 at 11:24
I checked but not getting – venusri Feb 25 '22 at 11:34
Okay we will try to make it more simplified and try to get back. Thank you – Feb 25 '22 at 11:44

How to disable button when this length satisfies

1 Answers1