Question

我的html如下所示

<div>My app
  <form [formGroup]="selectForm">
    <select [formControl]="selectForm.controls['filename']">
    <option *ngFor="let item of files; let i = index;" [value]="item" [selected]="i==0">{{item}}</option>
    </select>
    <button type="submit" [disabled]="!selectForm.valid">Submit</button>
  </form>
</div>

我的组件如下

export class App {
    files: Array<any>=[];
    selectForm: FormGroup;
    name:string;
    constructor(private _formbulider: FormBuilder) {
        this.selectForm = this._formbulider.group({
        'filename': ['', Validators.required]
        });
        this.files = [1];
    }
}

但我的问题是提交被禁用，因为表单无效。我希望表格有效。 Plunkr链接是here

Answer 1

您可以使用值初始化字段，如下所示：

'filename': [this.files[0], Validators.required]

然后，您可以从HTML代码中删除[selected]代码。

* Edit

另一个选择是使用ngModel指令，这是我最喜欢的方式。

使用更新的代码检查plnkr。

Answer 2

按以下方式更改您的组件：

import { Component, NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <div>My app
    <form [formGroup]="selectForm">

      <select formControlName="filename">
        <option *ngFor="let item of files; let i = index;" [value]="item" [selected]="i==0">{{item}}</option>
      </select>
    </form>
    <button type="submit" [disabled]="!selectForm.valid"> Submit </button>
    </div>
  `,
})
export class App {
  files: Array<any>=[];
  selectForm: FormGroup;
  name:string;
  constructor(private _formbulider: FormBuilder) {
    this.files = [1,2,4,5,6];
    this.selectForm = _formbulider.group({
      filename: [this.files[0], Validators.required]
    });

  }
}

形成的Angular2对于自动选择的下拉列表无效

2 个答案: