I have an angular project where I used ngb-accordion from ng-bootstrap to display some details. My accordion is responsive. I have included forms inside each accordion. I have a requirement where I want to display a specific icon above the accordion panel depending on whether the form inside is valid or invalid. Like when the form is filled inside the accordion I would like to display a bootstrap tick icon , if it is wrong then I want it to display a cross mark icon. I tried writing a ngIf directive that checks whether the form is valid or not for the div containing icon.
Below is the code where i tried to implement the above said functionality for one accordion
HTML File
<head> </head> <body> <div> <div *ngIf="form1.invalid"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16"> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" style="color: red;"/> </svg> </div> <div> <ngb-accordion #acc="ngbAccordion"> <ngb-panel id="toggle-1" title="Primary Details" > <ng-template ngbPanelContent> <form #form1="ngForm" style="padding-left:20px;"> <div class="form-group"> <label for="name" class="control-label">First Name<sup style="color: red;font-size:medium;">*</sup></label> <input type="text" ngModel name="FirstName" class="form-control" id="FirstName"> </div> <div class="form-group"> <label for="name" class="control-label">Last Name<sup style="color: red;font-size:medium;">*</sup></label> <input type="text" name="LastName" class="form-control" id="LastName"> </div> <div class="form-group"> <label for="name" class="control-label">Organization<sup style="color: red;font-size:medium;">*</sup></label> <input type="text" name="name" class="form-control" id="name"> </div> </form> </ng-template> </ngb-panel> </ngb-accordion> </div> </div> <br> <ngb-accordion #acc="ngbAccordion"> <ngb-panel id="toggle-2" title="Secondary Details"> <ng-template ngbPanelContent> <form #form2="ngForm" style="padding-left:20px;"> <div class="form-group"> <label for="name" class="control-label">Address<sup style="color: red;font-size:medium;">*</sup></label> <input type="text" name="Address" class="form-control" id="name"> </div> <div class="form-group"> <label for="dropdown-test" class="control-label">City<sup style="color: red;font-size:medium;">*</sup></label> <select class="form-control" name="dropdown-test"> <option>select an option</option> <option>option2</option> <option>option3</option> <option>option4</option> <option>option5</option> </select> </div> </form> </ng-template> </ngb-panel> </ngb-accordion> <br> <ngb-accordion #acc="ngbAccordion"> <ngb-panel id="toggle-3" title="More Details"> <ng-template ngbPanelContent> <form #form3="ngForm" style="padding-left:20px;"> <div class="form-group"> <label for="name" class="control-label">Email<sup style="color: red;font-size:medium;">*</sup></label> <input type="text" name="Email" class="form-control" id="name"> </div> <div class="form-group"> <label for="name" class="control-label">Phone<sup style="color: red;font-size:medium;">*</sup></label> <input type="number" name="Phone" class="form-control" id="name"> </div> </form> </ng-template> </ngb-panel> </ngb-accordion> </body> CSS file
input[type="text"], select.form-control{ background: transparent; border: none; border-bottom: 1px solid #000000; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; } input[type="number"], select.form-control{ background: transparent; border: none; border-bottom: 1px solid #000000; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; } input[type="text"]:focus, select.form-control:focus { -webkit-box-shadow: none; box-shadow: none; border-color:rgb(31, 14, 187); } input[type="number"]:focus, select.form-control:focus { -webkit-box-shadow: none; box-shadow: none; border-color:darkred; } At the line <div *ngIf="form1.invalid"> it throws me an error saying src/app/collapsedemo/collapsedemo.component.html:9:21 - error TS2339: Property 'form1' does not exist on type 'CollapsedemoComponent'.
Please tell me what am I doing wrong. I will include the picture of working app without the ngIf directive when the form is not filled.
Also please suggest me an alternative if there is any, where I can display those icons in the acoordion panel itself just before the title like lets say before the "Primary Details" title in the above picture rather than above the ngb-panel.The ultimate goal is to display a green tick when the form details are filled and a cross mark when it is not filled inside the accordion.
https://stackoverflow.com/questions/67290015/error-ts2339-while-accessing-an-ngform-outside-a-div April 28, 2021 at 04:09AM
没有评论:
发表评论