Установка статического значения по умолчанию в опции выбора

Question

У меня проблема с установкой значения по умолчанию тега select.Вот мой фрагмент:

<select class="form-control" id="field_company" name="company" formControlName="company">
    <option value="null" [selected]="true"> {{ 'khanbankCpmsApp.company.default' | translate }}</option>
    <option
        [ngValue]="companyOption.id === editForm.get('company').value?.id ? editForm.get('company').value : companyOption"
                *ngFor="let companyOption of companies;"
    >
       {{ companyOption.name }}</option>
</select>

Когда по умолчанию это статическое значение должно отображаться при выборе.Но результат:

Что я сделал не так?любой совет?

Answer 1

Вы используете реактивную форму, поэтому вам нужно установить FormControl в свою форму formGroup, например.

<form [formGroup]="companyGroup">
    <select class="form-control"  name="company" formControlName="company">
        <option value="1"> One </option>
        <option value="2"> Two </option>
        <option value="3"> Three </option>
    </select>
</form>

, а файл .ts содержит

export class HelloComponent implements OnInit {
  @Input() name: string;
  companyGroup: FormGroup;

  constructor(private fb: FormBuilder) {

  }

  ngOnInit() {
    this.companyGroup = this.fb.group({
      company : ''
    })
    this.companyGroup.get('company').patchValue('2');
  }
}

Демонстрационная ссылка Здесь

Answer 2

Поскольку вы используете реактивную форму, вы должны установить значение по умолчанию в реактивной форме, чтобы в рамках платформы был выбран правильный вариант.

editForm = this.fb.group({ 
  name: [null, [Validators.required]], 
  status: [null, [Validators.required]], 
  dueDate: [], loanAmount: [], grantsOpenUntil: [], 
  users: [], 
  company: ['khanbankCpmsApp.company.default'], 
  });

<select class="form-control" id="field_company" name="company" formControlName="company">
    <option [ngValue]="'khanbankCpmsApp.company.default'"> {{ 'khanbankCpmsApp.company.default' | translate }}</option>
    <option
        [ngValue]="companyOption.id === editForm.get('company').value?.id ? editForm.get('company').value : companyOption"
                *ngFor="let companyOption of companies;"
    >
       {{ companyOption.name }}</option>
</select>