Как получить опцию выбора в Angular2

Question

Запись в ASP. Net Core MVC + Angular Я пытаюсь добавить новый рецепт, и у меня проблема только с получением значения из опции выбора. Когда я добавлял новый рецепт без категории, все работало нормально. Я использую реактивные формы для проверки.

Мои занятия:

export interface Category {
    id: number;
    name: string;
    recipes?: Recipe[];
}
export interface Recipe {
    id: number;
    name: string;
    ingredients: string;
    preparationTime: number;
    dateAdded: Date;
    photoUrl: string;
    description?: string;
    recipePhotos?: RecipePhoto[];
}

В моем add-recipe.component.ts

export class AddRecipeComponent implements OnInit {
  categories: Category[];
  user: User;
  recipe: Recipe;
  addRecipeForm: FormGroup;
  constructor(private fb: FormBuilder,
              private alertifyService: AlertifyService,
              private router: Router,
              private recipeService: RecipeService, private authService: AuthService) { }

  ngOnInit() {
    this.createRecipeForm();
    this.getCategories();
  }


  createRecipeForm() {
    this.addRecipeForm = this.fb.group({
      name: ['', Validators.required],
      ingredients: ['', Validators.required],
      preparationTime: ['', Validators.required],
      description: ['', Validators.required],
      categoryId: ['', Validators.required]
    });
  }


  createRecipe(id: number) {
    if (this.addRecipeForm.valid) {
      this.recipe = Object.assign({}, this.addRecipeForm.value);
      this.recipeService.addNewRecipe(this.authService.currentUser.id, this.recipe).subscribe(() => {
        this.alertifyService.success('New recipe has been added!');
      }, error => {
        this.alertifyService.error(error);
      }, () => {
          this.router.navigate(['/recipes']);
        });
    }
  }


  cancel() {
    this.router.navigate(['members']);
    this.alertifyService.warning('Cancelled');
  }

  getCategories() {
    this.recipeService.getCategories().subscribe(response => {
      this.categories = response;
    }, error => {
      this.alertifyService.error(error);
    })
  }

}

В моем HTML

<div class="container" >
  <div class="row justify-content-center">
    <div class="col-lg body-card-shadow">
      <form [formGroup]="addRecipeForm" class="p-5" 
      (ngSubmit)="createRecipe()">
        <h2 class="text-center text-primary"> ADD NEW RECIPE</h2>
        <hr>

        <div class="form-group">
          <input type="text" [ngClass]="{
              'is-invalid':
                addRecipeForm.get('name').errors &&
                addRecipeForm.get('name').touched
            }" class="form-control" formControlName="name" placeholder="Name" />
          <div class="invalid-feedback">Please name your Recipe</div>
        </div>

        <div class="form-group">
          <input type="text" [ngClass]="{
              'is-invalid':
                addRecipeForm.get('ingredients').errors &&
                addRecipeForm.get('ingredients').touched
            }" class="form-control" formControlName="ingredients" placeholder="Ingredients.." />
          <div class="invalid-feedback"
          *ngIf="addRecipeForm.get('ingredients').touched && addRecipeForm.get('ingredients').hasError('required')"> Ingredients are required
        </div>
        </div>

        <div class="form-group">
          <input type="number" [ngClass]="{
              'is-invalid':
                addRecipeForm.get('preparationTime').errors &&
                addRecipeForm.get('preparationTime').touched
            }" class="form-control" formControlName="preparationTime" placeholder="Preparation Time" />
          <div class="invalid-feedback"
          *ngIf="addRecipeForm.get('preparationTime').touched && addRecipeForm.get('preparationTime').hasError('required')"> Preparation Time is required
        </div>
        </div>

        <div class="form-group">
          <textarea cols=100% rows="6" [ngClass]="{
              'is-invalid':
                addRecipeForm.get('description').errors &&
                addRecipeForm.get('description').touched
            }" class="form-control" formControlName="description" placeholder="Description"></textarea>
          <div class="invalid-feedback"
          *ngIf="addRecipeForm.get('description').touched && addRecipeForm.get('description').hasError('required')"> Descripe your recipe, it's important!
        </div>
        </div>

        <div class="form-group">
          <label for="category">Category</label>
          <select [ngClass]="{
            'is-invalid':
              addRecipeForm.get('category').errors &&
              addRecipeForm.get('category').touched
          }"  class="form-control" formControlName="category">
              <option *ngFor="let category of categories">{{category.name}}</option>
          </select>
          <div class="invalid-feedback"
        *ngIf="addRecipeForm.get('category').touched && addRecipeForm.get('category').hasError('required')"> You must select category
      </div>
      </div>
        <div class="form-group text-center">
          <button class="btn btn-success" [disabled]="!addRecipeForm.valid" type="submit">Add</button>
          <button class="btn btn-default" type="button" (click)="cancel()">
            Cancel
          </button>
        </div>

      </form>
    </div>
  </div>
</div>

В консоли я получаю

Answer 1

Ваш код немного сложен для понимания, части отсутствуют, например, список категорий, которые, я полагаю, вы также загружаете в ngOnInit ()

Вы используете реактивную форму для определения формы, и вы должны использовать реактивную форму для полей значений захвата

Do c Здесь: https://angular.io/guide/reactive-forms

Вам просто нужно изменить html для определения имен полей, должны быть определены элементы формы с formControlName с тем же именем, которое вы назначаете в этом this.addRecipeForm

<form [formGroup]="addRecipeForm" (ngSubmit)="createRecipe()">

<!-- others fields should be here --> 
<div class="form-group">
    <label for="categorxy">Category</label>
    <select formControlName="category">
        <option *ngFor="let category of categories">{{category.name}}</option>
    </select>
</div>

<form>

Отправить функцию

  createRecipe() {
    if (this.addRecipeForm.invalid) { return; }

      const valuesForm = this.addRecipeForm.value
      // valuesForm.category

      // Here call service save Recipe
  }

Я не говорю по-английски sh очень хорошо, извините

Приветствие из Чили

Answer 2

У тебя почти было это. NgModel связывает значение элемента формы выбора с переменной.

Здесь оно привязано к ключу атрибута addRecipeForm.category компонента:

<div class="form-group">
  <label for="category">Category</label>
  <select [(ngModel)]="addRecipeForm.category">
    <option *ngFor="let category of categories">{{category.name}}</option>
  </select>
</div>

Вы можете получить к нему доступ в коде с помощью this.addRecipeForm.category.

Answer 3

Я нашел решение !!

Мне пришлось изменить код для этого:

<div class="form-group">
          <label for="categoryId">Category</label>
          <select class="form-control" formControlName="categoryId">
              <option *ngFor="let category of categories" [value]="category.id">{{category.name}}</option>
          </select>
          <div class="invalid-feedback"
        *ngIf="addRecipeForm.get('categoryId').touched && addRecipeForm.get('categoryId').hasError('required')"> You must select category
          </div>
      </div>

Спасибо за ответы!