how to define a select component within a clr-tab

Question

Tried to insert a "select" component under a tab. Basically, the tab just displays some dynamic forms. The select is a list of string for user selection Looks like my definition is correct. Do not know why it messed up the whole angular/clarity UI page.

<clr-tab>
    <button clrTabLink>Submission Form</button>
    <clr-tab-content>
        &nbsp;<br>
    <label class="required" for="uniqueCertIDs">Unique Cert IDs</label>
    <div class="select">
        <select id="partnercertIDs" formControlName="EEPortalProductDetails">
        <option *ngFor="let ucertID of uniquecertIDs" [value]="ucertID.UniqueCertId">{{ucertID.UniqueCertId}} </option>
        </select>
     </div>

Very likely, the scope of the select portion is not correct. Failed finding related documentation.

Your sample is not showing the closing tags for these elements, so hard to say. Please provide either a reproduction of your issue in a Stackblitz, or more detail. I don't know what "why it messed up the whole angular/clarity UI page" means, is there an error or what? — Jeremy Wilken, Mar 26 '18 at 16:11

score 0 · Answer 1 · answered Mar 26 '18 at 16:35

It's difficult to say whats happening without a running example. I created a simple form with a select in a tab and it seems to be ok.

Here is the template code for my tabs:

          <clr-tabs>
            <clr-tab>
                <button clrTabLink id="link1">Tab1</button>
                <clr-tab-content id="content1" *clrIfActive>
                  <h3>Form 1</h3>
                  <form>
                    <div class="form-group">
                        <label for="selects_1">This is a select box</label>
                        <div class="select">
                          <select id="selects_1">
                            <option>Select</option>
                            <option *ngFor="let user of users" [value]="user">{{user}} </option>
                          </select>
                        </div>
                    </div>
                  </form>
                </clr-tab-content>
            </clr-tab>
        </clr-tabs>

You can see this running here: https://stackblitz.com/edit/so-tabs-form-select

If this doesn't solve your issue, can you fork the StackBlitz and recreate it there?

Now, the select data is populated correctly, but the ng-change event does not work as expected. — nextgen-ui, Mar 28 '18 at 12:26

score 0 · Answer 2 · answered Mar 28 '18 at 12:32

<form [formGroup]="partnersForm" >
    <div class="form-group">
        <label class="required" for="selects_1">Unique Cert IDs</label>
            <div class="select" >
                <select id="selects_1" formControlName="partnerFormCertIDs" ng-change="selectAction()">
                  <option *ngFor="let ucertID of uniquecertIDs" [value]="ucertID.UniqueCertId" >{{ucertID.UniqueCertId}}</option>
                </select>
        </div>
    </div>
</form>

and in my Session.ts file. Debug using console, the alert never shows up

selectAction() {
    alert("selected value changed !!!!");
}

Jose Gomes · Answer 3 · 2018-03-29T14:09:34.340

0

@nextgen-ui Regarding your second issue, the data binding syntax should be either on-change or (change); ng-change is an AngularJS directive.

Please see this Stackblitz.

edited Mar 29 '18 at 14:09

answered Mar 29 '18 at 14:02

Jose Gomes

36
3

The method I defined in (change) need send a post message to the backend controller of the MVC model. Based on development and debug, I found this is not supported in angular framework. – nextgen-ui Apr 01 '18 at 04:47
I don't quite understand what is not supported; are you trying to use the select value as post data? That should work fine… You might want to ask another question with further details. – Jose Gomes Apr 01 '18 at 13:23

score 0 · Answer 4 · answered Apr 02 '18 at 01:55

@Jose Gomes

The event is defined as updateCertData()

<form [formGroup]="partnersForm" >
            <div class="form-group">
                <label class="required" for="selects_1">Unique Cert IDs</label>
                <div class="select">
                <select id="selects_1" formControlName="partnerFormCertIDs" (change)="updateCertData()">
                <option *ngFor="let ucertID of uniquecertIDs" [value]="ucertID.UniqueCertId">{{ucertID.UniqueCertId}}</option>
                </select>
                </div>
            </div>
        </form>

And I defined a POST API in the event

updateCertData(){
    let selectedCertID = this.partnersForm.get('partnerFormCertIDs').value;
    for ( let partnerInfo of this.uniquecertIDs) {
        if(partnerInfo.UniqueCertId == selectedCertID){
            this.extractSubmit(this.cert);
            this.submit[0].Option[0].value = partnerInfo.ProductId;
            this.submit[0].Option[1].value = partnerInfo.ProductName;
            this.certsService.setSubmissionProduct(this.certId, this.submit);
            break;
        }
    }
}

this.certsService.setSubmissionProduct is a POST API, sending data back to UI Server

setSubmissionProduct(sessionId: string, info:any){
    let body = {'submitConfig': info};
    let url = GLOBALS.baseUrl + "session/" + sessionId + "/submitproduct";
    return this.post(url, body);
}

The this.post never sends message to the controller successfully. I tried several other post methods, which works well in other logic part, but never sends message successfully if it is put within this "change" event.

how to define a select component within a clr-tab

4 Answers4