Angular 7, Asp.net web api, assigning roles to users - html

Question

I have an ASP.NET Web API with Angular 7 material design client side. I want to assign a role to a current user,
I have a user that I'm trying to assign a role to. I've got the .Net part working, but I can not figure out how to implement it on the angular side. I'm not sure if I'm getting the select dropdown correctly implemented.
In my console.log(), the role is coming up as 'undefined'. Any help is appreciated.
The below is the current code.
ASP.NET Web API
[HttpPost]
public async Task<IActionResult> Role(Roles role)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
try
{
var assignRole = await _contextFile.AddRoles(role.Email, role.UserRoles);
}
catch (Exception ex)
{
throw ex;
}
return Ok();
}
Angular 7
Service
userRole(email: string, role: string){
return this.http.post(this.Url + {email, role});
}
populateDropdownRoles(){
return this.http.get(this.roleUrl);
}
.ts file
assignRole() {
this.roleService.userRole(this.user.email, this.role);
}
dropdownRole() {
this.roleService.populateDropdownRoles();
}
.html file
<form (ngSubmit)="assignRole()">
<mat-form-field>
<input
matInput
placeholder="Email"
name="email"
value="{{ user.email}}"
/>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Role">
<mat-option *ngFor="let role of roles" name ="rolename" [(ngModel)]="role.rolename" value="{{role.rolename}}">
{{role.rolename}}
</mat-option>
</mat-select>
</mat-form-field>
<button
mat-raised-button
type="submit"
>
Assign
</button>
</form>

Answer 1

I just mocked this up really quickly which is working. You may have to modify some of the variable names.
Moved [(ngModel)] and name to the <mat-select> element.
Declared the variable that is being bound to [(ngModel)] inside component class.
Printed out selected value in assignRole() method.
NOTE: This is assuming your are successfully receiving role values back from your API. I added a mock roles array inside the component class.
component.ts
#Component({
selector: 'app-roles-form',
templateUrl: './roles-form.component.html',
styleUrls: ['./roles-form.component.css']
})
export class RolesFormComponent implements OnInit {
public roles = [{ rolename: 'user' }, { rolename: 'admin' }];
public selectedRole: any;
constructor() { }
ngOnInit() {
}
assignRole() {
console.log('selectedRole: ', this.selectedRole);
}
}
component.html
<form (ngSubmit)="assignRole()">
<mat-form-field>
<mat-select placeholder="Role" [(ngModel)]="selectedRole" name="selectedRole">
<mat-option *ngFor="let role of roles" value="{{role.rolename}}">
{{role.rolename}}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button type="submit">
Assign
</button>
</form>
DOCS
https://stackblitz.com/angular/gokjjqynqvo?file=main.ts
https://material.angular.io/components/select/overview

Answer 2

A few things I noticed: The name of you model in the controller is role and it is a string according to the parameters received in the service method, so you should use [(ngModel)]="role" and also I think you should put it at the mat-select tag not the mat-option. So your html should look something like this.
<mat-form-field>
<mat-select [(ngModel)]="role" name ="role" placeholder="Role">
<mat-option *ngFor="let role of roles" value="{{role.rolename}}">
{{role.rolename}}
</mat-option>
</mat-select>
</mat-form-field>
PS: I would suggest you change the name of the model to roleName. like this.roleName and [(ngModel)]="roleName" name ="roleName" it would be less confusing for you.
You could check the example here

Answer 3

You have the ngModel wrong, ngModel goes on the control, not the options.
<mat-select [(ngModel)]="role" name ="rolename" placeholder="Role">
<mat-option *ngFor="let role of roles" [value]="role.rolename">
{{role.rolename}}
</mat-option>
</mat-select>
After that you need to check on the .Net part the structure of the class Role because, if my memory is not failing, the UserRoles property is a list of selected roles, if that is correct you need to send an array of roles, not just one role.