Блог

У меня возникли проблемы с использованием FormArray и FormGroup UI, о которых рассказывается ниже.

Код

Элементарно component.html файл

 <section class="sampleForm">
<div class="panel">
    <p class="sample-setup-breadcrumbs">
        <a routerLink="/communicationSuite/samples" class="muted-text"> Q amp; A Listing </a>
        <i class="fa fa-chevron-righta smaller-text muted-text"></i>
        Setup
    </p>

    <div *ngIf="errorOnPage" class="alert alert-danger fade in">
        <a href="#" class="close" data-dismiss="alert" (click)="errorOnPage=false">amp;times;</a>
        <strong>Error!</strong> {{pageError}}
    </div>
    <form *ngIf="sampleFormGroup"
          [formGroup]="sampleFormGroup"
          (click)="dirtyFormCheck(sampleFormGroup.dirty)"
          (keyup)="dirtyFormCheck(sampleFormGroup.dirty)"
          class="form-horizontal">
        <div class="panel-heading">
            <h4>Name</h4>
        </div>
        <section class="panel-body show-overflow">
            <div class="row col-sm-7">
                <div class="flex-display flex-space-between">
                    <h5 class="muted-text control-header-text">Q amp; A Name<span class="required">*</span></h5>
                    <label id="nameCharCounter" class="details-text-counter-label muted-text">
                        {{ (sampleFormGroup.controls.sampleName?.value?.length || 0) }} / {{ this.nameMaxLength }}
                    </label>
                </div>
                <input class="form-control text-form-control"
                       formControlName="sampleName" id="sampleName" name="sampleName"
                       value="{{ this.sampleName }}" ng-required="true" ng-trim="false"
                       maxlength="{{ this.nameMaxLength }}" placeholder="Enter Q amp; A Name" required="required" />

                <div *ngIf="sampleFormGroup amp;amp; sampleFormGroup.controls.sampleName?.invalid amp;amp; (sampleFormGroup.controls.sampleName?.dirty || sampleFormGroup.controls.sampleName?.touched)" class="required">sample Name is required.</div>
            </div>
        </section>

        <div class="panel-heading">
            <h4>Question amp; Answer<span class="required">*</span></h4>
        </div>
        <section class="panel-body show-overflow">
            <div class="row">
                <div class="col-sm-6">
                    <div class="flex-display flex-space-between">
                        <h5 class="muted-text control-header-text">Question Text<span class="required">*</span></h5>
                    </div>
                    <input class="form-control text-form-control"
                           formControlName="questionTitle" id="questionTitle" name="questionTitle"
                           value="{{ this.questionTitle }}" ng-required="true" ng-trim="false" maxlength="{{ this.questionsLength}}}"
                           placeholder="Enter Question Here" required="required" />

                    <div *ngIf="sampleFormGroup amp;amp; sampleFormGroup.controls.questionTitle?.invalid amp;amp; (sampleFormGroup.controls.questionTitle?.dirty || sampleFormGroup.controls.questionTitle?.touched)" class="required">sample Question is required.</div>

                    <div class="flex-display flex-space-between">
                        <h5 class="muted-text control-header-text">Answer Type<span class="required">*</span></h5>
                    </div>
                    <!--<select class="form-control" name="questionType" id="questionType" formControlName="questionType">-->
                    <!--<option class="muted-text" ng-selected="this.questionType === 'SINGLE_CHOICE'"> Single Select on Answer Choices </option>-->
                    <!--<option class="muted-text" ng-selected="this.questionType === 'MULTIPLE_CHOICE'"> Multiple Select on Answer Choices</option>-->
                    <!--</select>-->
                    <select class="form-control" name="questionType" id="questionType" formControlName="questionType">
                        <option *ngFor="let questionType of questionTypes" [value]="questionType" class="muted-text">
                            {{ questionType}}
                        </option>
                    </select>

                </div>
                <div class="col-sm-6">
                    <div class="flex-display flex-space-between">
                        <h5 class="muted-text control-header-text">Answer Choices<span class="required">*</span></h5>
                    </div>
                    <input class="form-control text-form-control"
                           formControlName="answerText1" id="answerText1" name="answerText1"
                           value="{{ this.answerText1 }}" ng-required="true" ng-trim="false" maxlength="{{ this.answersLength}}}}"
                           placeholder="Answer Choice 1" required="required" />

                    <div *ngIf="sampleFormGroup amp;amp; sampleFormGroup.controls.answerText1?.invalid amp;amp; (sampleFormGroup.controls.answerText1?.dirty || sampleFormGroup.controls.answerText1?.touched)" class="required">At least two answer are required.</div>

                    <input class="form-control text-form-control"
                           formControlName="answerText2" id="answerText2" name="answerText2"
                           value="{{ this.answerText2 }}" ng-required="true" ng-trim="false" maxlength="{{ this.answersLength}}}}"
                           placeholder="Answer Choice 2" required="required" />

                    <div *ngIf="sampleFormGroup amp;amp; sampleFormGroup.controls.answerText2?.invalid amp;amp; (sampleFormGroup.controls.answerText2?.dirty || sampleFormGroup.controls.answerText2?.touched)" class="required">At least two answer are required.</div>

                    <input class="form-control text-form-control"
                           formControlName="answerText3" id="answerText3" name="answerText3"
                           value="{{ this.answerText3 }}" ng-required="true" ng-trim="false" maxlength="{{ this.answersLength}}}}"
                           placeholder="Answer Choice 3" />


                    <input class="form-control text-form-control"
                           formControlName="answerText4" id="answerText4" name="answerText4"
                           value="{{ this.answerText4 }}" ng-required="true" ng-trim="false" maxlength="{{ this.answersLength}}}}"
                           placeholder="Answer Choice 4" />


                    <input class="form-control text-form-control"
                           formControlName="answerText5" id="answerText5" name="answerText5"
                           value="{{ this.answerText5 }}" ng-required="true" ng-trim="false" maxlength="{{ this.answersLength}}}}"
                           placeholder="Answer Choice 5" />

                </div>
                <div class="col-sm-7">
                    <div class="flex-display flex-space-between">
                        <h5 class="muted-text control-header-text">Confirmation Message<span class="required">*</span></h5>
                    </div>
                    <input class="form-control text-form-control"
                           formControlName="confirmationMessage" id="confirmationMessage" name="confirmationMessage"
                           value="{{ this.confirmationMessage }}" ng-required="true" ng-trim="false"
                           maxlength="{{ this.confirmationMessageLength }}" placeholder="Type your confirmation message here" required="required" />

                    <div *ngIf="sampleFormGroup amp;amp; sampleFormGroup.controls.confirmationMessage?.invalid amp;amp; (sampleFormGroup.controls.confirmationMessage?.dirty || sampleFormGroup.controls.confirmationMessage?.touched)" class="required">Confirmation Message is required.</div>
                </div>
            </div>

        </section>


        <div>All fields required.</div>
        <div class="form-actions btn-container-botton extra-padding">
            <a [routerLink]="['']" class="btn page-secondary-action-btn customer-instance-button">CANCEL</a>
            <button [disabled]="!(sampleFormGroup.valid)" class="btn page-primary-action-btn" type="button" (click)="savesample()">Submit</button>
        </div>
    </form>

</div>
  

У меня возникли проблемы с инициализацией формы с использованием FormArray, FormGroup для вышеуказанного пользовательского интерфейса. Не могли бы вы, пожалуйста, кто-нибудь помочь с тем, как правильно инициализировать эту форму?

Пример текста сообщения приведен ниже. Если вы заметили, questions[] — это массив в модели, а не объект, хотя он уже однажды использовался в пользовательском интерфейсе.

 {
"samples": [
    {
        "id": 95,
        "name": "Test Self Attestation",
        "type": "SelfAttestation",
        "employerKey": "castlight",
        "externalKey": "test_self_attestation_20190314065907650_9127",
        "questions": [
            {
                "id": 2404,
                "title": "How would you rate your health?",
                "answers": [
                    {
                        "displayOrder": 0,
                        "text": "Excellent",
                        "externalKey": "excellent_20190314065907792_9961",
                        "selected": false
                    },
                    {
                        "displayOrder": 1,
                        "text": "Good",
                        "externalKey": "good_20190314065907792_6599",
                        "selected": false
                    },
                    {
                        "displayOrder": 2,
                        "text": "OK",
                        "externalKey": "ok_20190314065907792_6746",
                        "selected": false
                    },
                    {
                        "displayOrder": 3,
                        "text": "Bad",
                        "externalKey": "bad_20190314065907792_9591",
                        "selected": false
                    },
                    {
                        "displayOrder": 4,
                        "text": "Terrible",
                        "externalKey": "terrible_20190314065907792_1418",
                        "selected": false
                    }
                ],
                "topicName": "Other",
                "topicId": 0,
                "externalKey": "how_would_you_rate_your_health_20190314065907650_7168",
                "isTemplateQuestion": false,
                "question_type": "SINGLE_CHOICE"
            }
        ],
        "confirmationMessage": "Self Attestation completed successfully"
      }
],
"pagination": {
    "page": 0,
    "per_page": 1000,
    "total_pages": 1,
    "total_count": 8
}
  

}