如何在 bootstrap 4.3.1 和 angular 8 中使用表单验证

Question

如果答案未提交或答案最大值和最小值不正确，我想显示一条错误消息。

这里是html

的代码

<div class="container">
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header  bg-transparent border-success">
                <h3>15 questions</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <form [formGroup]="surveyQuestionForm">
                              <div class="form-group">
                                <label class="control-label"> 3) Please rank the following features in order of importance,where 1 is the most important to you.?</label>
                                <div class="ml-3">
                                    <table>

                                        <tr>
                                            <td>1. Location  <br/>
                                            <div class="invalid-feedback"
                                             *ngIf="surveyQuestionForm.get('q3').touched && surveyQuestionForm.get('q3').hasError('required')">Answer required</div>
                                             <div class="invalid-feedback"
                                             *ngIf="surveyQuestionForm.get('q3').touched && surveyQuestionForm.get('q3').hasError('max')">max value</div> 
                                             <div class="invalid-feedback"
                                             *ngIf="surveyQuestionForm.get('q3').touched && surveyQuestionForm.get('q3').hasError('min')">min value</div></td>

                                            <td><input type="number" style="width:40px;" id="q3_1"  
                                                [ngClass]="{'is-invalid': surveyQuestionForm.get('q3').errors && surveyQuestionForm.get('q3').touched}"
                                                    formControlName="q3" class="text-center" /></td>
                                        </tr>
                                          <tr>
                                            <td>2. Confort </td>
                                            <td><input type="number" style="width:40px;" id="q3_1"  
                                                     class="text-center" /></td>
                                        </tr>
                                        <tr>
                                            <td>3. Service </td>
                                            <td><input type="number" style="width:40px;" id="q3_1"  
                                                      class="text-center" /></td>
                                        </tr>
                                        <tr>
                                            <td>4. Value for money </td>
                                            <td><input type="number" style="width:40px;" id="q3_1"  
                                                      class="text-center" /></td>
                                        </tr>
                                    </table>


                                </div>
                            </div>



                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <button class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是打字稿代码

surveyQuestionForm: FormGroup;
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
      this.createForms();
  }
  createForms(): any {
    this.surveyQuestionForm = this.fb.group({
      q1: ['', Validators.required],
      q2: ['', Validators.required],
      q3: ['', [Validators.required, Validators.min(1), Validators.max(3)]],
      q4: ['', Validators.required],
      q5: ['', Validators.required],
      q6s: ['', Validators.required]
    } );
  }

我看到了这个 documentation。但不知道如何使用这些类。我浪费了很多时间来根据这个问题找到答案，但我找不到任何reference.Please帮助我解决这个问题。

感谢

Answer 1

我解决了这个问题 problem.In 我的案例问题是，我在输入标签中遗漏了 "form-control" class。

如何在 bootstrap 4.3.1 和 angular 8 中使用表单验证

How to use form validations in bootstrap 4.3.1 and angular 8

bootstrap-4

angular

angular8