如果添加了任何新文本，请突出显示输入/多选/文本区域

Question

我对Angular 6的材料设计非常陌生，在以下情况下我需要帮助。 我有一个输入，多选，文本区域，在这里我将两个字段的文本/值相同的当前值（不可编辑）和将来值（可编辑）显示在另一个下方。 我想突出显示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>

Screenshot of current and future values