ReactiveForms: [Value] field generating null when submitted

Question

I have an object with questions and answers.

When I do:

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

If for example question.answer is = "test1"

1) The populated value does not trigger the minLength Validation, until I clear the textbox and re-type.

2) and submitting the form, without minlength=4 generates the following.

It displays on the screen for the input field correctly, when I submit the form, the value is null.

The console output:

If I can get the validation to work for the prepopulated fields, I will not have this issue I believe, but the validation does not trigger.

My 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>

My Component:

 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
});

Yeah, I have all my form control declarations in my component. Posted my controls from component, and my Html — Taranjit Kang
– Taranjit Kang, Commented Jul 24, 2017 at 2:15
The reason why i have 20 form control declarations was to associate the question with the answer, always. — Taranjit Kang
– Taranjit Kang, Commented Jul 24, 2017 at 2:23

Vamshi · Accepted Answer · 2017-07-25 02:35:35Z

1

You can set the initial value in the FormControl itself. In your component

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

this.formGroup = new FormGroup(formControls);

Inside HTML

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

When someone overrides it takes the value from the input. Except in select or radio never try to assign value yourself.

Update Used FormGroup .

edited Jul 25, 2017 at 2:35

answered Jul 24, 2017 at 2:44

Vamshi

9,3615 gold badges41 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Taranjit Kang Over a year ago

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

Taranjit Kang Over a year ago

for(let i = 0; i > this.questions.length; i++){ this['.answer_' + i] = new FormControl(); this['question_' + i] = new FormControl(); }

Collectives™ on Stack Overflow

ReactiveForms: [Value] field generating null when submitted

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related