在选择选项中设置默认静态值

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>

默认情况下，该静态值应显示在select上。但是结果是：

我做错了什么？有什么建议吗？

Answer 1

由于您使用的是反应形式，因此应在反应形式中设置默认值，以便框架选择正确的选项。

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>

Answer 2

您正在使用反应形式，因此需要将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');
  }
}

演示链接Here