Настройка выбрана в выпадающем списке с Angular - PullRequest
Новая
       21

Настройка выбрана в выпадающем списке с Angular

0 голосов
/ 21 апреля 2020

У меня есть список, отображаемый в раскрывающемся списке, но по умолчанию он отображается как пустой, а не как первый элемент в раскрывающемся списке.

Я попытался добавить let i = 0, а затем [selected]="i = 0", но это, кажется, не устанавливает элемент по умолчанию для первого элемента, однако я получаю правильное значение обратно от i.

Ниже мой код: 

<div class="form-group">
    <label for="userName">User Name</label>
    <select formControlName="userName" class="form-control" (change)="userChange($event)">
      <option *ngFor="let row of usersModel;let i = index" value="{{ row.id }}" [selected]="i == 0">{{ row.userName }} {{ i }}</option>
    </select>
</div>

Вот мой Файл TypeScript: 

    import { Component, OnInit } from '@angular/core';
import { UserAdminService } from '../../services/user-admin.service';
import { FormBuilder, Form, FormControl, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'lib-add-user-to-role',
  templateUrl: './add-user-to-role.component.html',
  styleUrls: ['./add-user-to-role.component.css']
})
export class AddUserToRoleComponent implements OnInit {
  addUserToRoleForm: FormGroup;
  rolesModel: any[];
  usersModel: any[];
  selectedRole: string;
  selectedUser: string;

  constructor(private userAdminService: UserAdminService, private formBuilder: FormBuilder, private router: Router) {
    var roleControl = new FormControl('');
    var userControl = new FormControl('');

    this.addUserToRoleForm = formBuilder.group({ roleName: roleControl, userName: userControl });
  }

  ngOnInit() {
this.userAdminService.getRoles().subscribe(roles => {
  this.rolesModel = roles;
  this.selectedRole = this.rolesModel[0].name;
  this.userAdminService.getUsersNotInRole(this.selectedRole).subscribe(users => {
    this.usersModel = users;
    this.selectedUser = this.usersModel[0].id;
    console.log(this.usersModel[0].userName);
    this.addUserToRoleForm.controls['roleName'].setValue(this.rolesModel[0].name);
    this.addUserToRoleForm.controls['userName'].setValue(this.usersModel[0].userName);
  });
});
  }

  userChange(event: any) {
    this.selectedUser = event.target.value;
    console.log('Selected ' + this.selectedUser);
  }

  AddUserToRole() {
    this.userAdminService.addUserToRole(this.selectedUser, this.selectedRole)
      .subscribe(result => {
        if (result.success) {
          this.router.navigate(['/roleusermaint']);
        }
        else {
          console.log('Error Received on adding user to role');
        }
      });
  }
}

Как вы можете видеть, я добавил {{ i }} в текст, чтобы убедиться, что он показывает значение i и делает:

enter image description here

Чего мне не хватает?

Спасибо за любую помощь!

Ответы [ 2 ]

2 голосов
/ 21 апреля 2020

@ Axle, если вы используете реактивную форму, вам не нужно использовать [selected] или (change), просто при создании формы вы присваиваете значение userName

Использование конструктора 

const firstId=usersModel[0].id
this.form=new FormGroup({
   userName:new FormControl(firstId)
})

Использование formBuilder 

const firstId=usersModel[0].id
this.form=this.fb.group({
 userName:firstId
})

Использование setValue после создания формы 

   const firstId=usersModel[0].id
   this.form.get('userName').setValue(firstId)
0 голосов
/ 21 апреля 2020

Поскольку вы используете Angular реактивную форму, попытайтесь сохранить логи c в самом файле ts.

Используя setValue () Вы можете установить значение по умолчанию для элемента управления.

Чтобы установить значение по умолчанию для элемента управления формы, вы можете использовать его следующим образом: 

this.form.controls['country'].setValue(this.countries[0].id)

В шаблоне используйте его как 

<option *ngFor="let country of countries" [value]="country.id">
    {{ country.name }}
</option>

Рабочий Stackblitz

Ссылка:

Полный пример кода будет быть чем-то вроде

app.component.ts 

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import {Country} from './country';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  countries = [
    {
      id: 'us',
      name: 'United States'
    },
    {
      id: 'uk',
      name: 'United Kingdom'
    },
    {
      id: 'ca',
      name: 'Canada'
    }
  ];

  form: FormGroup;

  ngOnInit(){
      this.form = new FormGroup({
        country: new FormControl('')
     });
     this.form.controls['country'].setValue(this.countries[0].id)
  }

}

app.component. html

<form [formGroup]="form">
    <select formControlName="country">
        <option *ngFor="let country of countries" [value]="country.id">
            {{ country.name }}
        </option>
    </select>
</form>
...