Question

我有一个问题和答案的对象。

当我这样做时：

 <input minlength=4 #answer formControlName='answerControl{{ question.question_id }}' type="textbox" name="{{ question.question_id }}" [value]="question?.answer ? question.answer : ''">

例如，如果question.answer =“test1”

1）填充值不会触发minLength验证，直到我清除文本框并重新输入。

2）并且在没有minlength = 4的情况下提交表单会生成以下内容。

在屏幕上正确显示输入字段，当我提交表单时，该值为空。

控制台输出：

如果我可以对预先填充的字段进行验证，我相信我不会遇到此问题，但验证不会触发。

我的HtmL：

<form [formGroup]="pvqForm" (ngSubmit)="onSubmit(pvqForm)" novalidate>
      <div *ngFor="let question of questions | sortBy: 'selected'; let i = index" class="row container-generic">
          <div class="col-md-8">
            <div class="container-input-checkbox">
              <label class="container-flex">
              <input formControlName='questionControl{{ question.question_id }}' #checkBox class="pvq-create-checkbox" type="checkbox" [name]="question.question_id" (change)="checkedState($event, checkBox)" [checked]="isChecked(question)"> 
              <div class="pvq-create-label">
                <div *ngIf="lang == 'en'">
                    <p aria-label="English Question">{{ question.EN }}</p>
                </div>
                <div *ngIf="lang == 'fr'">
                    <p aria-label="French Question">{{ question.FR }}</p>
                </div>
              </div>
            </label>
              <label [@hideShow]="checkBox.checked ? 'show' : 'hide'">Answer
              <input minlength=4 #answer formControlName='answerControl{{ question.question_id }}' type="textbox" name="{{ question.question_id }}" [value]="question?.answer ? question.answer : ''">
              <div *ngIf="!pvqForm.controls['answerControl' + question.question_id ].valid" style="color: red;">
                {{ "MINLENGTH" | translate }}
              </div>
            </label>
            </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
           <button [disabled]="!pvqForm.valid" class="button-primary" aria-label="Continue" type="submit">Continue</button> 
           <button class="button-secondary" aria-label="Cancel" type="button" (click)="cancel()">Cancel</button>
           <button *ngIf="flowB" class="button-secondary" type="button">Postpone</button> 
        </div>
      </div>
    </form>

  </div>
</div>

我的组件：

 this.answer_1 = new FormControl();
this.answer_2 = new FormControl();
this.answer_3 = new FormControl();
this.answer_4 = new FormControl();
this.answer_5 = new FormControl();
this.answer_6 = new FormControl();
this.answer_7 = new FormControl();
this.answer_8 = new FormControl();
this.answer_9 = new FormControl();
this.answer_10 = new FormControl();
this.answer_11 = new FormControl();
this.answer_12 = new FormControl();
this.answer_13 = new FormControl();
this.answer_14 = new FormControl();
this.answer_15 = new FormControl();
this.answer_16 = new FormControl();
this.answer_17 = new FormControl();
this.answer_18 = new FormControl();
this.answer_19 = new FormControl();
this.answer_20 = new FormControl();

this.question_1 = new FormControl();
this.question_2 = new FormControl();
this.question_3 = new FormControl();
this.question_4 = new FormControl();
this.question_5 = new FormControl();
this.question_6 = new FormControl();
this.question_7 = new FormControl();
this.question_8 = new FormControl();
this.question_9 = new FormControl();
this.question_10 = new FormControl();
this.question_11 = new FormControl();
this.question_12 = new FormControl();
this.question_13 = new FormControl();
this.question_14 = new FormControl();
this.question_15 = new FormControl();
this.question_16 = new FormControl();
this.question_17 = new FormControl();
this.question_18 = new FormControl();
this.question_19 = new FormControl();
this.question_20 = new FormControl();


this.pvqForm = new FormGroup({
  answerControl1: this.answer_1,
  answerControl2: this.answer_2,
  answerControl3: this.answer_3,
  answerControl4: this.answer_4,
  answerControl5: this.answer_5,
  answerControl6: this.answer_6,
  answerControl7: this.answer_7,
  answerControl8: this.answer_8,
  answerControl9: this.answer_9,
  answerControl10: this.answer_10,
  answerControl11: this.answer_11,
  answerControl12: this.answer_12,
  answerControl13: this.answer_13,
  answerControl14: this.answer_14,
  answerControl15: this.answer_15,
  answerControl16: this.answer_16,
  answerControl17: this.answer_17,
  answerControl18: this.answer_18,
  answerControl19: this.answer_19,
  answerControl20: this.answer_20,
  questionControl1: this.question_1,
  questionControl2: this.question_2,
  questionControl3: this.question_3,
  questionControl4: this.question_4,
  questionControl5: this.question_5,
  questionControl6: this.question_6,
  questionControl7: this.question_7,
  questionControl8: this.question_8,
  questionControl9: this.question_9,
  questionControl10: this.question_10,
  questionControl11: this.question_11,
  questionControl12: this.question_12,
  questionControl13: this.question_13,
  questionControl14: this.question_14,
  questionControl15: this.question_15,
  questionControl16: this.question_16,
  questionControl17: this.question_17,
  questionControl18: this.question_18,
  questionControl19: this.question_19,
  questionControl20: this.question_20
});

Answer 1

您可以在FormControl本身设置初始值。在您的组件中

let formControls = {};
for(let i=0; i< questions.length ; i++ ){
    formControls['question_'+i] = new FormControl(questions[i].answer);
}

this.formGroup = new FormGroup(formControls);

内部HTML

<form [formGroup]="formGroup"  > 
    <input [formControlName]="'question_'+i" 
           *ngFor="let question of questions; let i = index" />
</form>

当有人覆盖时，它会从输入中获取值。除了选择或无线电以外，永远不要尝试自己分配value。

更新已使用FormGroup。

ReactiveForms：[Value]字段在提交时生成null

1 个答案: