Angular2, ist für die automatische ausgewählt Dropdown

Question

Meine html sieht aus wie unten

<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> 

Meine Komponente ist als unten

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]; 
    } 
} 

Aber mein Problem ist ungültig zu bilden ungültig deaktiviert einreichen, da Form ist. Ich erwarte, dass die Form gültig ist. Plunkr Link ist here

Answer 1

Sie Feld mit einem Wert initialisieren kann, wie folgt aus:

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

Dazu [selected] Tag von HTML-Code zu entfernen.

Eine andere Option ist die Verwendung der ngModel-Direktive, und das ist die Art, die ich am meisten bevorzuge.

Überprüfen Sie die plnkr mit aktualisierten Code.

Answer 2

Ihre Komponente ändern, wie unten:

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] 
    }); 

    } 
}