중첩 그룹 Angular 양식이 있습니다. 그룹의 컨트롤 값을 가져 와서 JSON 개체의 컨트롤 이름과 일치 시키려고합니다.

Question

저는 Angular를 사용하여 작성한 작은 연락처 양식이 있습니다. 양식을 확인하고 양식 데이터를 JSON 개체로 변경하려고합니다. 여기

<form [formGroup]="addContactForm" (ngSubmit)="onSubmit()" novalidate > 

    <div [hidden]="addcontactForm.submitted"> 

     <div class="modal-body" style="overflow: auto"> 

      <!-- create contact --> 
      <div style="padding: 0 0px 0px 25px;margin-top:30px;"> 

       <div class="form-horizontal"> 
        <span *ngIf="ACname.invalid && (ACname.dirty || ACname.touched)" class="has-error"> 
         <span *ngIf="ACname.errors.required"> 
          Last Name is required. 
         </span> 
        </span> 
        <!-- name --> 
        <div FormGroupName="ACname"> 
         <div class="form-group" style="text-align:right" [ngClass]="{ 'has-error': ACname.addContactFirstName.invalid && (ACname.addContactFirstName.dirty || ACname.addContactFirstName.touched) }"> 
          <label class="col-sm-3" for="addContactFirstName">First Name</label> 
          <div class="col-sm-7"> 
           <input id="addFirstName" 

             formControlName="addContactFirstName" 
             class="form-control" 
             placeholder="Enter First Name" /> 


          </div> 
         </div> 

         <div class="form-group" style="text-align:right" [ngClass]="{ 'has-error': ACname.addContactLastName.invalid && (ACname.addContactLastName.dirty || ACname.addContactLastName.touched) }"> 
          <label class="col-sm-3" for="addContactLastName">Last Name</label> 
          <div class="col-sm-7"> 
           <input id="addLastName" 

             class="form-control" 
             formControlName="addContactLastName" 
             placeholder="Enter Last Name" /> 

          </div> 
         </div> 

        </div> 


        <div FormGroupName="ACcontactMethod"> 
         <!-- office phone --> 
         <div class="form-group" style="text-align:right" [ngClass]="{ 'has-error': ACcontactMethod.addcontactForm.submitted && !ACcontactMethod.addContactOfficePhone.valid }"> 
          <label class="col-sm-3" for="addContactOfficePhone">Office Phone</label> 
          <div class="col-sm-7"> 
           <input id="addofcPhone" 

             type="text" 
             class="form-control" 
             formControlName="addContactOfficePhone" 
             placeholder="Enter Office Number" /> 
           <span *ngIf="addContactOfficePhone.invalid && (addContactOfficePhone.dirty || addContactOfficePhone.touched)" class="has-error"> 
            <span *ngIf="addContactLastName.errors.required"> 
             Name is required. 
            </span> 
           </span> 
          </div> 
         </div> 

         <!-- mobile phone --> 
         <div class="form-group" style="text-align:right" [ngClass]="{ 'has-error': addcontactForm.submitted && !addContactMobilePhone.valid }"> 
          <label class="col-sm-3" for="addContactMobilePhone">Mobile Phone</label> 
          <div class="col-sm-7"> 
           <input id="addmobPhone" 

             type="text" 
             class="form-control" 
             formControlName="addContactMobilePhone" 
             placeholder="Enter Mobile Number" /> 
           <span *ngIf="addContactMobilePhone.invalid && (addContactMobilePhone.dirty || addContactMobilePhone.touched)" class="has-error"> 
            <span *ngIf="addContactMobilePhone.errors.required"> 
             Name is required. 
            </span> 
           </span> 

          </div> 
         </div> 

         <!-- home phone --> 
         <div class="form-group" style="text-align:right" [ngClass]="{ 'has-error': addcontactForm.submitted && !addContactHomePhone.valid }"> 
          <label class="col-sm-3" for="addContactHomePhone">Home Phone</label> 
          <div class="col-sm-7"> 
           <input id="addhomPhone" 

             type="text" 
             class="form-control" 
             formControlName="addContactHomePhone" 
             placeholder="Enter Home Number" /> 
           <span *ngIf="addContactHomePhone.invalid && (addContactHomePhone.dirty || addContactHomePhone.touched)" class="has-error"> 
            <span *ngIf="addContactHomePhone.errors.required"> 
             Name is required. 
            </span> 
           </span> 
          </div> 
         </div> 

         <!-- email --> 
         <div class="form-group" style="text-align:right" [ngClass]="{ 'has-error': addcontactForm.submitted && !addContactEmail.valid }"> 
          <label class="col-sm-3" for="addContactEmail">Email</label> 
          <div class="col-sm-7"> 
           <input id="addEmail" 

             type="email" 
             class="form-control" 
             formControlName="addContactEmail" 
             placeholder="Enter Email" /> 
           <span *ngIf="addContactEmail.invalid && (addContactEmail.dirty || addContactEmail.touched)" class="has-error"> 
            <span *ngIf="addContactEmail.errors.required"> 
             Name is required. 
            </span> 
           </span> 
          </div> 
         </div> 

         <!-- chat id --> 
         <div class="form-group" style="text-align:right" [ngClass]="{ 'has-error': addcontactForm.submitted && !addContactChatId.valid }"> 
          <label class="col-sm-3" for="addContactChatId">Chat ID</label> 
          <div class="col-sm-7"> 
           <input id="addChatID" 

             type="text" 
             class="form-control" 
             formControlName="addContactChatId" 
             placeholder="Enter Chat ID" /> 
           <span *ngIf="addContactChatId.invalid && (addContactChatId.dirty || addContactChatId.touched)" class="has-error"> 
            <span *ngIf="addContactChatId.errors.required"> 
             Name is required. 
            </span> 
           </span> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="modal-footer"> 
      <button type="button" class="btn btn-default pull-left" (click)="addcontactForm.reset()" data-dismiss="modal">Close</button> 
      <button type="submit" 
        class="btn btn-primary" 
        [disabled]="!addcontactForm.valid" 
        (click)="addContact(model);"> 
       Add Contact 
      </button> 
     </div> 
    </div> 
    <div class="submitted-message" *ngIf="addcontactForm.submitted"> 
     <p>You've submitted your contact, {{ addcontactForm.value.addContactFirstName }} {{ addcontactForm.value.addContactLastName }}!</p> 
     <button type="button" class="btn btn-default pull-left" (click)="addcontactForm.reset()" data-dismiss="modal">Close</button> 
     <button (click)="addcontactForm.resetForm({})">Add new Contact </button> 
    </div> 
</form> 

내 TS는 다음과 같습니다 : 여기

내 폼의

import { Component} from '@angular/core'; 
import { AppComponent } from '../app.component'; 
import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms'; 


@Component({ 
    selector: 'addcontactmodal', 
    templateUrl: 'addcontact.component.html' 
}) 


export class AddContactModalComponent { 
    id: any; 

    addContactForm: FormGroup; 

    constructor(private _appComponent: AppComponent, private fb: FormBuilder) { 
     this.id = localStorage.getItem('Id'); 

     this.addContactForm = this.fb.group({ 
      ACname: new FormGroup({ 
       addContactFirstName: new FormControl('', Validators.minLength(40)), 
       addContactLastName: new FormControl('', Validators.minLength(40)), 
      }), 
      ACcontactMethod: new FormGroup({ 
       addContactOfficePhone: new FormControl('', Validators.minLength(20)), 
       addContactMobilePhone: new FormControl('', Validators.minLength(20)), 
       addContactHomePhone: new FormControl('', Validators.minLength(20)), 
       addContactEmail: new FormControl('', Validators.minLength(127)), 
       addContactChatId: new FormControl('', Validators.minLength(127)) 
      }) 

     }); 
    } 





    // private method(s) 
    private addContact() { 

     let data = { 
      ChatId: this.fb.group('addContactChatId').value, 
      Email: addContactEmail, 
      FirstName: addContactFirstName, 
      HomePhone: addContactHomePhone, 
      MobilePhone: addContactMobilePhone, 
      LastName: addContactLastName, 
      OfficePhone: this.model.addContactOfficePhone 
     } 





     this._appComponent.signalRService.setAgentContact(this.id, data);   
    } 

} 

내가 원하는에 :

1. 검증
2. 는 JSON
에 데이터 출력을 가지고 형태

양식에서 약속 한 유효성 확인을받지 못했습니다. 제출하지 않습니다.

오류 :

nhandled Promise rejection: Cannot read property 'invalid' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'invalid' of undefined 
    at Object.View_AddContactModalComponent_0.co [as updateDirectives] 

Answer 1

당신은 유효성 검사 메시지에 대한 완전한 속성 경로를 사용하고 있지 않습니다. 여기에 당신의 단순화 된 템플릿입니다 :

<form [formGroup]="addContactForm" (ngSubmit)="onSubmit()" novalidate > 
<!-- formGroupName - mark all form controls belonging to this group inside tag --> 
<div formGroupName="ACname"> 
    <input formControlName="addContactFirstName" /> 
    <!-- use complete property path or do like follows! --> 
    <span *ngIf="addContactForm.hasError('minlength', 'ACname.addContactFirstName')"> 
    Minlength 40 
    </span> 
</div> 
</form> 

StackBlitz