Typoskript FormGroup umfasst Dropdown

Question

Ich habe eine Rolle Klasse wie zum Beispiel: Rollen:

export class Role{ 
    id:number; 
    roleName:string; 
    description:string; 

} 

und weisen Rolle:

import {Role} from './roles'; 
    export class AssignRole{ 
     isActive:number; 
     userRole:Role= new Role(); 

    } 

auf TS-Datei, ich Formular deklarieren:

this.userForm = new FormGroup({ 
     userName: new FormControl('', Validators.required,), 
     firstName: new FormControl('', Validators.required), 
     roles: new FormControl('', Validators.required), 
     lastName: new FormControl('', Validators.required), 
     address: new FormControl('', [ Validators.required,]) 
    }); 

In html möchte ich die Rollen dopdownlist

erstellen

<div class="form-group"> 
         <label>Roles</label> 
         <select class="form-control" id="roles"> 
         <option formControlName="roles"> 

         </option> 

        </select> 
        </div> 

und Eingabedaten an Rollen Feld:

this.route.params.switchMap((params: Params) => this.userService.getAssignRole(+params['id'])).subscribe(
     assignRole => { 
      this.userForm.patchValue({ 
      roles:assignRole.userRole.roleName 
      }); 
     }, error => { 
      console.log(error); 
     } 
    ); 

die Fehlermeldung angezeigt wird: ERROR Fehler: Kein Wert Accessor für Formular-Steuerelement mit dem Namen: 'Rollen'

Bitte geben Sie mir.

Answer 1

Sie müssen Ihren HTML-Code ändern, so dass sich formControlName innerhalb des Tags <select> befindet. Dann denke ich, dass Sie einen Standardwert benötigen würden, so dass Sie kein leeres Feld haben. Hier

ist ein Beispiel, das Geschlecht zu wählen:

In Ihrem HTML:

<select class=form-control formControlName="gender" required> 
    <option value="F">F</option> 
    <option value="M">M</option> 
</select> 

In Ihrem app.component.ts, setzen Sie den Wert default:

this.form= fb.group({ 
    gender: new FormControl('F'), 
    ... 
});