Динамическое значение угловой формы в формате JSON

Question

В моей форме пользователь может добавить несколько правил, и это правило может быть разного типа. При выборе типа правила появится другой зависимый элемент управления для захвата ввода пользователя, например, регулярное выражение => Регулярное выражение, диапазон => минимальное и максимальное значение и т. Д. Я хочу захватить значение этого типа правила и зависимого элемента управления в формате JSON в качестве дополнительного правила и зависимого элемента управления. будет добавлено в ближайшее время. Форма, текущее значение правила, ожидаемое значение правила изображения, добавленные соответственно

allRule: any[] = [{}];

onRuleChange(e, index) {
  console.log(e.target.value);
  if (e.target.value == "regex") {
    this.regexControl[index] = true;

    this.textControl[index] = false;
    this.rangeControl[index] = false;
  } else if (e.target.value == "range") {
    this.rangeControl[index] = true;


    this.regexControl[index] = false;
    this.textControl[index] = false;
  } else if (e.target.value == "text") {
    this.textControl[index] = true;

    this.rangeControl[index] = false;
    this.regexControl[index] = false;
  }


}


addRuleNode() {
  this.allRule.push({});
}

<div *ngFor="let rule of allRule;let i=index">
  <div class="form-group">
    <label for="ruleType"><b> Rule Type {{i+1}}</b>:</label>
    <span>
              <span class="float-right  small-font-size"> <button type="button" class="btn btn-danger btn-xs small-font-size" (click)="deleteRuleNode(i)">X  </button> </span>

    <span class="float-right mb-2 mr-3 small-font-size">
              
                  <select  class="custom-select small-font-size"  >
                    <option value="" disabled>Select Error Type</option>
                    <option *ngFor="let item of errorType" [ngValue]="item.type"  >{{item.type}}</option>
                  </select>
              
              </span>
    <span class="float-right  small-font-size mr-2 mt-2"> Active <input type="checkbox" id="{{i+1}}" class="small-font-size" /> </span>
    </span>
    <select class="form-control" class="custom-select" (change)="onRuleChange($event,i)">
      <option value="" disabled>Choose your Rule</option>
      <option *ngFor="let item of ruleType" [ngValue]="item.type">{{item.type}}</option>
    </select>
  </div>
  <div class="form-group" *ngIf="regexControl[i]">
    <label for="regex-control">Regex:</label>
    <input class="form-control" id="regex-control" [(ngModel)]="allRule[i]['regExp']" type="text" />
  </div>
  <div class="form-group" *ngIf="rangeControl[i]">
    <label for="rangeMin">Min Value:</label>
    <input class="form-control" id="range-control-start" [(ngModel)]="allRule[i]['minValue']" type="text" />
    <label for="rangeMax">Max Value</label>
    <input class="form-control" id="range-control-end" [(ngModel)]="allRule[i]['maxValue']" type="text" />
  </div>
  <div class="form-group" *ngIf="textControl[i]">
    <label for="text-control-min"> Min Length:</label>
    <input class="form-control" id="text-control-min" [(ngModel)]="allRule[i]['minLength']" type="text" />
    <label for="text-control-max"> Max Length:</label>
    <input class="form-control" id="text-control-max" [(ngModel)]="allRule[i]['maxLength']" type="text" />
  </div>
  <div class="form-group">
    <label for="text-message"> Message:</label>
    <input class="form-control" id="text-message" type="text" />
  </div>
</div>