Html привязка не происходит

Question

У меня есть форма в проекте angular, которую я заполняю автоматически при загрузке компонента, все работает отлично, за исключением одного свойства, которое не отображает информацию.

form.ts

id;
agreementSumary: {} = {};
agreementEditFrm = new FormGroup({
    agreementType:  new FormControl('', []),
    referenceNumber:  new FormControl('', []),
    isEffective:  new FormControl('', []),
    dateEffective:  new FormControl('', []),
    dateExpiration:  new FormControl('', [])
});

constructor(private dataService: DataServicesService, private route: ActivatedRoute) { }

ngOnInit() {
    this.id = this.route.snapshot.url[1].path
    this.dataService.getProject(this.id).subscribe((rps) => {
        this.agreementSumary = {
            agreementType: rps.agreement.agreementType,
            referenceNumber: rps.agreement.referenceNumber,
            isEffective: rps.agreement.isEffective,
            dateEffective: rps.agreement.dateEffective,
            dateExpiration: rps.agreement.dateExpiration
        }
       this.agreementEditFrm.setValue(this.agreementSumary);
       let dateEffective =  new Date(this.agreementSumary["dateEffective"])
       let dateExpiration =  new Date(this.agreementSumary["dateExpiration"])
       this.agreementEditFrm.controls["dateEffective"].setValue( formatDate(dateEffective, "dd/MM/yyyy", "en"))
       this.agreementEditFrm.controls["dateExpiration"].setValue( formatDate(dateExpiration, "dd/MM/yyyy", "en"))
       console.log(this.agreementEditFrm.controls)
   },
       error => console.log(error)
   )
}

форма. Html

<div class="clr-row">
<form [formGroup]="agreementEditFrm" (ngSubmit)="onSubmit()">
    <div class="clr-col-12">
    <label>Type</label>
    <clr-select-container>
        <select clrSelect class="clr-select" name="libraryItemTypeId" formControlName="agreementType">
            <option></option>
            <option value="Programmatic Agreement">Option 1</option>
            <option>Option 2</option>
        </select>
        <clr-control-helper>e.g. Select an option</clr-control-helper>
        <clr-control-error>This field is required!</clr-control-error>
    </clr-select-container>
</div>
<div class="clr-col-12" style="margin-top: 24px;">
    <label>Reference Number</label>
    <clr-input-container>
        <input clrInput placeholder="Enter value here" name="title" formControlName="referenceNumber"/>
        <clr-control-helper class="clr-subtext">e.g., M-2391</clr-control-helper>
        <clr-control-error>This field is required!</clr-control-error>
    </clr-input-container>
</div>
<div class="clr-col-12" style="margin-top: 24px;">
    <label>Effective</label>
    <clr-select-container>
        <select clrSelect class="clr-select" name="libraryItemTypeId" formControlName="isEffective">
            <option></option>
            <option value="true">Yes</option>
            <option>No</option>
        </select>
        <clr-control-helper>e.g. Select an option</clr-control-helper>
        <clr-control-error>This field is required!</clr-control-error>
    </clr-select-container>
</div>
<div class="clr-col-12" style="margin-top: 24px;">
    <clr-date-container>
        <label>Effective Date</label>
        <input type="date" clrDate name="dateEffective" formControlName="dateEffective">
    </clr-date-container>
</div>
<div class="clr-col-12" style="margin-top: 24px;">
    <clr-date-container>
        <label>Expiration Date</label>
        <input type="date" clrDate name="dateExpiration" formControlName="dateExpiration">
    </clr-date-container>
</div>
</form>
</div>

Но я не знаю, почему dateExpiration не отображается, я делаю то же самое с dateEffective, и этот работает нормально .

И в console.log() я вижу, что каждый FormControl имеет правильное значение.

Answer 1

Предложение:

Разбить все это:

 let dateExpiration =  new Date(this.agreementSumary["dateExpiration"])
   this.agreementEditFrm.controls["dateEffective"].setValue( formatDate(dateEffective, "dd/MM/yyyy", "en"))

К

     let dateExpiration =  new Date(this.agreementSumary["dateExpiration"]);     
     let formatteDate = formatDate(dateEffective, "dd/MM/yyyy", "en");
     Debugger.Breaak();
     this.agreementEditFrm.controls["dateEffective"].setValue( formattedDate);

Вы видите правильные значения там?