Как установить текущий год в поле «Выбрать» по умолчанию в «Реактивных формах»?

Question

Здравствуйте, я создал выбор, который показывает мне текущий год, 5 лет из прошлого и 3 года из будущего. Теперь я хотел бы установить его так, чтобы текущий год всегда был по умолчанию. Это должно быть сделано в Reactive Forms ... Вы знаете, как это сделать?

Мой код:

// HTML
<form [formGroup]="sendYearsForm">
<select class="upload_slc" id="upload_slc" required title="" formControlName="year" 
 (change)="sendYear($event)">
   <option *ngFor="let years of sendYears" [value]="years">{{years}}</option>
</select>
 <div class="select_arrow"></div>
</form>

// TS
sendYearsForm: FormGroup;
currentDate: Date = new Date();
selectedYear: number;

// Year form
    this.sendYearsForm = this.fb.group({
      year: [null]
    });
    // Show the current year with -5 and +3
    this.selectedYear = this.currentDate.getFullYear(); // HThe current year is transferred here. How do I integrate it into the template?
    for (let i = this.currentDate.getFullYear() - 5; i <= this.currentDate.getFullYear() + 3; i++) {
      this.sendYears.push(i);
    }

Answer 1

Вы можете использовать patchValue для изменения значения formcontrol

yourFormGroupName.controls.yourFormControlName.patchValue (значение, которое вы хотите назначить)

В вашем случае

this.sendYearsForm = this.fb.group({
  year: [null]
});
// Show the current year with -5 and +3
this.selectedYear = this.currentDate.getFullYear(); // The current year is transferred here. How do I integrate it into the template?

this.sendYearsForm.controls.year.patchValue(this.selectedYear); // this will set the value of 'year' control to selectedYear(current year)

for (let i = this.currentDate.getFullYear() - 5; i <= this.currentDate.getFullYear() + 3; i++) {
  this.sendYears.push(i);
}

Answer 2

Вы можете сделать это одним из следующих способов:

this.selectedYear = this.currentDate.getFullYear();
this.sendYearsForm= this.fb.group({
  year: new FormControl(this.selectedYear, [])
});

или

this.sendYearsForm = this.fb.group({
 year: [null]
});
this.selectedYear = this.currentDate.getFullYear();
this.sendYearsForm.get('year').setValue(this.selectedYear);