Angular：无法根据其他日期字段自动填充单选按钮字段

Question

我的 UI 上有两个日期字段plannedRatingDate 和 PlannedRatingCommitteeDate。 如果用户填写plannedRatingDate 字段，rcReview 字段应设置为'No'。 如果用户填写plannedRatingCommitteeDate 字段，rcReview 字段应设置为'Yes'。 rcReview 字段是我的 UI 上的单选按钮字段。

在 app.component.html 中：

<tr>   
<td colspan="2"></td>
              <td style="width:500px">
                <label for="PlannedReviewDate">Planned Review Date</label>
                <input id="PlannedReviewDate" name="PlannedReviewDate" (change)="basedOnRatingDate($event)" [(ngModel)]="deal.plannedReviewDate" placement="right" type="text" bsDatepicker [bsConfig]="datePickerConfig" class="form-control">
              </td>
            </tr>
            <br>
            <tr>
              <td colspan="3"></td>
              <td><label for="isReviewComplete">Is Review Complete?</label>
                <input id="isReviewComplete" name="isReviewComplete" [(ngModel)]="deal.isReviewComplete" type="radio" class="form-control" value="Complete">
                Complete<br></td>
            </tr>
            <tr>
              <td colspan="3"></td>
              <td><input id="isReviewComplete" name="isReviewComplete" [(ngModel)]="deal.isReviewComplete" type="radio" class="form-control" value="Not Complete">
                Not Complete<br></td>
            </tr>
            <br>
            <tr>
              <td colspan="3"></td>
              <td style="width:500px">
                <label for="PlannedRatingCommitteeDate">Planned rating committee date</label>
                <input id="PlannedRatingCommitteeDate" name="PlannedRatingCommitteeDate" (change)="populateRCReview($event)" [(ngModel)]="deal.plannedRatingCommitteeDate" placement="right" type="text" bsDatepicker [bsConfig]="datePickerConfig" class="form-control">
              </td>
            </tr>
            <br>
            <tr>
              <td colspan="3"></td>
              <td>
                <label>RC Review</label>
                <input id="rcReview" name="rcReview" [(ngModel)]="deal.rcReview" type="radio" class="form-control" value="Yes">
                Yes<br>
              </td>
            </tr>
            <tr>
              <td colspan="3"></td>
              <td>
                <input id="rcReview" name="rcReview" [(ngModel)]="deal.rcReview" type="radio" class="form-control" value="No">
              No<br>
            </td>
            </tr>

在 app.component.ts 中：

export class AppComponent implements OnInit {
  title = 'angular-app';
  name = 'angular-app';
  datePickerConfig: Partial<BsDatepickerConfig>;
  dropdownList = [];
  selectedItems: any;
  selected:any;
  dropdownSettings:IDropdownSettings;
  dealid : number;
  isReviewComplete: any;
  plannedRatingCommitteeDate: Date;
  plannedReviewDate: Date;
  ExpectedReleaseDate: Date;
  ReleaseTimeCriteria: any;
  SubsequentRating: any;
  Priority: any;
  rcReview: any;
  ApplicationReceived: any;
  subsequentRating: any;
  deal:DealApi= new DealApi();
  constructor(private service:HttpclientService) {}
  ngOnInit(){

   this.datePickerConfig = Object.assign({},{ containerClass:'theme-dark-blue', showWeekNumbers: false});

  };
  public savenow(){
    this.service.getdeals(this.deal).subscribe((data:any)=>{alert("Deal added successfully.");});
   }
   basedOnRatingDate(event:any){
    this.deal.rcReview = "No";
   }
   populateRCReview(event:any){
    this.deal.rcReview = "Yes";
   }

如果用户输入plannedRatingDate 字段，上述代码不会自动填充带有“No”的rcReview 字段。 应该做哪些改变？

任何帮助将不胜感激！

Answer 1

我通过使用 ngModelChange 事件而不是 change 事件解决了这个问题。