Wednesday, 24 October 2018

Unable to set dynamic validation for fields using angular

I'm facing an issue with an existing application, below is my scenario I'm having the below JSON format

.html code

<div class="panel-group" id="accordion">
  <div *ngFor="let property of Tree.properties">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="link" data-toggle="collapse" data-parent="#accordion" href="#dataCatg-">
            <div *ngIf="property.required">
              <span class="glyphicon glyphicon-chevron-right"></span>
            </div>
            <div *ngIf="!property.required">
              <span class="glyphicon glyphicon-chevron-right"></span>
            </div>

          </a>
        </h4>
      </div>
      <div id="dataCatg-" class="panel-collapse collapse">
        <div class="panel-body">
          <ul class="list-group">
            <li class="list-group-item" *ngFor="let prop of property.details">
              <div *ngIf="prop.details.visible">
                <div class="row">
                  <div class="col-md-4">
                    <div *ngIf="data.includes(prop.name)">
                      <label class="inline-label" for=""></label>
                    </div>
                    <div *ngIf="!data.includes(prop.name) ">
                      <label class="inline-label " for=" "></label>
                    </div>

                  </div>

                  <div class="col-md-8 ">
                    <div *ngIf="!Edit">


                                                                        <span
                                                                          *ngIf="formVisible && metaDataTemplateMap[selectedFile]!==undefined ">


                                                                        <input  id=""
                                                                                type=" "
                                                                                [(ngModel)]="Data[prop.name]"
                                                                                class="form-control ">
                                                                        </span>


                    </div>
                    <div *ngIf="Edit">
                      <div *ngIf="prop.details.group ">

                                                                            <span *ngIf="formView">
                                                                                   <!--need-->
                                                                                  <input   id=""
                                                                                           type=""
                                                                                           [(ngModel)]="Edit[prop.name]"
                                                                                           (ngModelChange)="Edit($event)"
                                                                                           style=" border-radius:0;"
                                                                                           class="form-control">

                                                                              </span>


                      </div>
                      <div *ngIf="!prop.details.group ">
                        <input id="" type="text " style=" border-radius:0" class="form-control " readonly>
                      </div>
                    </div>

                  </div>
                </div>
              </div>

            </li>
          </ul>
        </div>
      </div>

    </div>

  </div>
</div>

.ts Code

Data(res) {


    this.Tree['Properties'] = [];

    for (let property in res.properties) {

      var prop = res.properties[property];
      if (prop['properties'] !== undefined) {
        let temp= {};
        if (res['required'].indexOf(property) !== -1) {
          temp['required'] = true;
        }
        else {
          temp['required'] = false;
        }
        temp['name'] = property;
        let template = {};
        temp['details'] = [];
        for (let nestedProps in prop.properties) {
          let nestedProp = {};
          nestedProp['name'] = nestedProps;

          if (prop.properties[nestedProps]['type'] == 'string' || prop.properties[nestedProps]['type'] == 'date-time') {
            prop.properties[nestedProps]['type'] = 'text';
            template[nestedProps] = '';
          }

          if (prop.properties[nestedProps]['type'] == 'integer') {
            prop.properties[nestedProps]['type'] = 'number';
            template[nestedProps] = 0;
          }

          if (prop.properties[nestedProps]['type'] == 'array') {
            prop.properties[nestedProps]['type'] = 'array';
            template[nestedProps] = '';
          }
          if (prop.properties[nestedProps]['group'] == true) {
            if (this.Edit[property] == undefined)
              this.Edit[property] = {};
            this.Edit[property][nestedProps] = '';
          }

          nestedProp['details'] = prop.properties[nestedProps];

          temp['details'].push(nestedProp);
        }
        this.Data[property] = template;
        this.Tree['Properties'].push(temp);
      }
      if (prop['properties'] == undefined) {
        let temp = {};
        if (res['required'].indexOf(property) !== -1) {
          temp['required'] = true;
        }
        else {
          temp['required'] = false;
        }
        temp['name'] = property;
        if (prop['type'] == 'string' || prop['type'] == 'date-time') {
          prop['type'] = 'text';
          this.Data[property] = '';
        }

        if (prop['type'] == 'number') {
          prop['type'] = 'integer';
          this.Data[property] = 0;
        }

        if (prop['group'] == true) {
          this.Edit[property] = '';
        }
        temp['details'] = prop;
        this.Tree['Others'].push(temp);
      }
    }


  }

here what I'm want is 1. if You see in the JSON I have

"required": [
    "host", 
    "quantity", 
    "id"
], 

while generating the fields it has to check the above mentioned fields are empty or not with out template or reactive form approach how can it be possible if the fields are empty then we have let user know that fields are empty how can I accomplish this ?



from Unable to set dynamic validation for fields using angular

No comments:

Post a Comment