形式下拉列表中選擇菜單值 - 角2

Question

我試圖讓所選擇的下拉列表的價值，我嘗試使用

console.log(this.myForm.controls['SignUpForm'].value['states']; 

得到它，但它返回「未定義」。一些幫助將不勝感激。這是我的完整代碼。

index.component.html

<form novalidate [formGroup]="myForm" (ngSubmit)="onSignUp()" autocomplete="off"> 
    <div formGroupName="SignUpForm"> 
    <div> 
     <select formControlName="state" title="University"> 
     <option *ngFor="let state of states" [ngValue]="state">{{state.abbrev}}</option> 
     </select> 
    </div> 
    </div> 
    <div> 
    <button type="submit" name="action">Sign Up</button> 
    </div> 
</form> 

helloworld.component.ts

export class HelloWorldComponent implements OnInit { 
    myForm: FormGroup; 
    constructor(private _fb: FormBuilder){ } 

    states = [ 
    {name: 'Arizona', abbrev: 'AZ'}, 
    {name: 'California', abbrev: 'CA'}, 
    {name: 'Colorado', abbrev: 'CO'}, 
    {name: 'New York', abbrev: 'NY'}, 
    {name: 'Pennsylvania', abbrev: 'PA'}, 
    ]; 

    onSignUp(): void { 
    console.log(this.myForm.controls['SignUpForm'].value['abbrev']) 
    } 

    ngOnInit() { 
    this.myForm = this._fb.group({ 
     SignUpForm: this._fb.group({ 
     state: [this.states, Validators.compose([ 
      Validators.required 
     ])] 
     }) 
    }); 
    $(document).ready(function() { 
     $('select').material_select(); 
    }); 
    } 
} 

Answer 1

你可以這樣做有兩種方式。如果你想在你像這樣通過myForm.value：

(ngSubmit)="onSignUp(myForm.value)" 

，你可以提取該值：

onSignUp(formValues): void { 
    console.log(formValues.SignUpForm['state']) 
} 

如果你不想這樣做，你可以得到的值：

console.log(this.myForm.get('SignUpForm').get('state').value) 

例Plunker