ReactiveForms: [Wert] Feld erzeugt Null beim Senden

Question

Ich habe ein Objekt mit Fragen und Antworten.

Wenn ich tun:

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

Wenn zum Beispiel question.answer ist = "test1"

1) Der bestückte Wert der minLength Validierung nicht ausgelöst werden, bis ich die Textbox löschen und re- Art.

2) und das Formular abschicken, ohne minlength = 4 erzeugt folgendes.

Es zeigt auf dem Bildschirm für das Eingabefeld korrekt an, wenn ich das Formular absende, ist der Wert null.

Die Konsolenausgabe:

Wenn ich die Validierung bekommen für die vorab ausgefüllten Felder zu arbeiten, werde ich nicht dieses Problem habe ich glauben, aber die Validierung nicht ausgelöst.

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

Meine Komponente:

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

Sie können den Anfangswert in der FormControl setzte sich. In Ihrer Komponente

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

this.formGroup = new FormGroup(formControls); 

Innen HTML

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

Wenn jemand überschreibt er den Wert aus dem Eingang nimmt. Außer in Select oder Radio versuchen Sie niemals value selbst zuzuweisen.

Aktualisieren Verwendet FormGroup.