私はネストされたグループ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