Выделите ввод /Multiselect/textarea, если добавлен новый текст

Question

Я очень новичок в дизайне материалов Angular 6 и мне нужна помощь по сценариям ниже. У меня есть input, multiselect, textarea, где я отображаю текущие значения (не редактируемые) и будущие значения (редактируемые) один под другим с одинаковым текстом / значением в обоих полях. Я хочу выделить поле textarea/multiselect/input, если что-нибудь добавится / изменить будущие значения. Может кто-нибудь помочь мне достичь этого, пожалуйста.

 <mat-grid-tile [colspan]="3" [rowspan]="1" class="cr-grid-title">
            <div class="form-table-row">
              <div class="form-table-col">Description</div>
              <div class="form-table-col current-val truncate">{{control.currentValues.description}}</div>
              <div class="form-table-col">
                <textarea [(ngModel)]="control.requestModel.description" cols="90" rows="" value="{{control.futureValues.description}}"></textarea>
              </div>
            </div>
          </mat-grid-tile>
          <mat-grid-tile [colspan]="4" [rowspan]="1" class="cr-grid-title">
            <div class="form-table-row">
              <div class="form-table-col">Detailed description</div>
              <div class="form-table-col current-val truncate">{{control.currentValues.detailDesc}}</div>
              <div class="form-table-col">
                <textarea [(ngModel)]="control.requestModel.detailDesc" cols="120" rows="" value="{{control.futureValues.detailDesc}}"></textarea>
              </div>
            </div>
          </mat-grid-tile>
          <mat-grid-tile [colspan]="1" [rowspan]="1" class="cr-grid-title">
            <div class="form-table-row">
              <div class="form-table-col">Primary Risk</div>
              <div class="form-table-col current-val">{{control.currentValues.primaryRisk.riskName}}</div>
              <div class="form-table-col">
                <mat-select [(ngModel)]="control.requestModel.primaryRisk">
                  <mat-option [value]="getPrimaryRisk(control.futureValues.risks)"
                  [disabled]="isSelectedAsSecondary(control,getPrimaryRisk(control.futureValues.risks))">{{getPrimaryRisk(control.futureValues.risks).riskName}}</mat-option>
                  <mat-option *ngFor="let risk of dropdownData.risks" [value]="risk"
                  [disabled]="isSelectedAsSecondary(control,risk)">{{risk.riskName}}</mat-option>
                </mat-select>
              </div>
            </div>
          </mat-grid-tile>
          <mat-grid-tile [colspan]="3" [rowspan]="1" class="cr-grid-title">
            <div class="form-table-row">
              <div class="form-table-col">Secondary Risk</div>
              <ul class="secondary-lists"><li class="form-table-col current-val"  *ngFor="let item of control.currentValues.secondaryRisk">{{item.riskName}}, </li></ul>
              <div class="form-table-col">
                <mat-select [(ngModel)]="control.requestModel.secondaryRisk" multiple>
                  <mat-option [value]="secRisk" *ngFor="let secRisk of getSecondaryRisks(control.futureValues.risks)"
                  [disabled]="isSelectedAsPrimary(control,secRisk)">{{secRisk.riskName}}</mat-option>
                  <mat-option *ngFor="let risk of dropdownData.risks" [value]="risk"
                  [disabled]="isSelectedAsPrimary(control,risk)">{{risk.riskName}}</mat-option>
                </mat-select>
              </div>
            </div>
          </mat-grid-tile>

Скриншот текущих и будущих значений