Question

我有以下下拉菜单：

<td>Quiz</td>
<td>
    <select formControlName="quiz_id" name="quiz_id" class="form-control">
        <option *ngFor="let quiz of quizzes" value="{{quiz_id}}">
            {{quiz.title}}
        </option>
    </select>
    <!-- show this error if the field is 'empty' and 'touched' -->
    <div
        *ngIf="create_challenge_form.get('quiz_id').touched && create_challenge_form.get('quiz_id').hasError('required')"
        class="alert alert-danger">
        Quiz is required.
    </div>
</td>

如您所见，可以控制该字段是否为空。这些选项是从RESTful API服务器获取的。前端是使用Angular完成的。

问题是当我选择其中一个选项时：

我收到以下错误：

显然，控件仍然认为该字段为空。

这是create-challenge_form所在的我的打字稿文件：

import { Component, OnInit, Input, Output, EventEmitter, Provider } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import {Challenge} from '../../_models/challenge';
import { Quiz } from '../../_models/quiz';
import { AlertService } from '../../_services/alert.service';
import {ChallengeService} from '../../_services/challenge.service';
import { QuizService } from '../../_services/quiz.service';

@Component({
  selector: 'app-create-challenge',
  templateUrl: './create-challenge.component.html',
  styleUrls: ['./create-challenge.component.css'],
  providers: [ChallengeService, QuizService]
})
export class CreateChallengeComponent implements OnInit {

    // our angular form
    create_challenge_form: FormGroup;
      // list of quizzes
      quizzes: Quiz[];

    // list of challenges
    challenges: Challenge[];

    // initialize 'challenge service', 'quiz service' and 'form builder'
    constructor(
        private challengeService: ChallengeService,
        private quizService: QuizService,
        private alertService: AlertService,
        formBuilder: FormBuilder
    ){
        // based on our html form, build our angular form
        this.create_challenge_form = formBuilder.group({
            name: ["", Validators.required],
            duration: ["", Validators.required],
            description: ["", Validators.required],
            quiz_id: ["", Validators.required]
        });
    }

    // user clicks 'create' button
    createChallenge(){

        // send data to server
        this.challengeService.createChallenge(this.create_challenge_form.value)
            .subscribe(
                 challenge => {
                    // show an alert to tell the user if challenge was created or not
                    this.alertService.success('Challenge created!', true);                   
                 },
                 error => console.log(error)
             );
    }

    // what to do when this component were initialized
    ngOnInit(){
        this.quizService.getAll().subscribe(
      quizzes => {
        this.quizzes = quizzes;
        this.alertService.success('Récupération des quizzes OK', true);
      },
      error => {
        this.alertService.error(error);
      });

  }
}

我还应该指出，错误只出现在测验中。当我用数据填充它们时，名称，描述和持续时间不会返回错误。

编辑：WS响应： [{"id":1,"title":"Java","description":"Quiz Java DESCRIPTION..","category":{"id":1,"name":"Cat 1 Java/JEE","description":"description de la catégorie Java","parentCategory":null,"version":2},"level":"BEGINNER","language":"FRENCH","version":0},{"id":2,"title":"Servlet JSP","description":"Servlet JSP DESCRIPTION..","category":{"id":1,"name":"Cat 1 Java/JEE","description":"description de la catégorie Java","parentCategory":null,"version":2},"level":"BEGINNER","language":"FRENCH","version":0},{"id":3,"title":"JSF","description":"Quiz JSF DESCRIPTION..","category":{"id":1,"name":"Cat 1 Java/JEE","description":"description de la catégorie Java","parentCategory":null,"version":2},"level":"BEGINNER","language":"FRENCH","version":0},{"id":4,"title":"C#","description":"Quiz C# DESCRIPTION..","category":{"id":2,"name":"Cat 2 NET","description":"description de la catégorie .NET","parentCategory":null,"version":2},"level":"BEGINNER","language":"FRENCH","version":0},{"id":5,"title":"ASP.NET MVC","description":"ASP.NET MVC DESCRIPTION..","category":{"id":2,"name":"Cat 2 NET","description":"description de la catégorie .NET","parentCategory":null,"version":2},"level":"BEGINNER","language":"FRENCH","version":0},{"id":6,"title":"WCF","description":"Quiz WCF DESCRIPTION..","category":{"id":2,"name":"Cat 2 NET","description":"description de la catégorie .NET","parentCategory":null,"version":2},"level":"BEGINNER","language":"FRENCH","version":0}]

Answer 1

我终于通过改变这一行来实现它：

<option *ngFor="let quiz of quizzes" value="{{quiz_id}}">

要：

<option *ngFor="let quiz of quizzes" value="{{quiz.id}}">

导致问题的是value字段。

选择菜单字段，即使其中包含数据也是空的

1 个答案: