formControlName을 사용하고 중첩된 formGroup을 처리하는 방법은 무엇입니까?

formControlName을 사용하고 중첩된 formGroup을 처리하는 방법은 무엇입니까?

Angular documentation에 따르면 우리는 다음을 사용할 수 있습니다.formControlName우리의 형태로:

<h2>Hero Detail</h2>
<h3><i>FormControl in a FormGroup</i></h3>
<form [formGroup]="heroForm" novalidate>
    <div class="form-group">
        <label class="center-block">Name:
            <input class="form-control" formControlName="name">
        </label>
    </div>
</form>

사람들이 말하듯이...

상위 FormGroup이 없으면 [formControl]="name"이(가) 이전에 작동한 이유는 해당 지시어가 단독으로 작동할 수 있기 때문입니다. 즉, FormGroup에 속하지 않고 작동하기 때문입니다.상위 FormGroup의 경우 클래스에서 올바른 FormControl과 연결하려면 이름 입력에 구문 형식ControlName=name이 필요합니다.이 구문은 Angular가 상위 FormGroup(이 경우에는 heroForm)을 찾고 해당 그룹 내부에서 이름이라는 FormControl을 찾도록 지시합니다.

어쨌든 몇 달 전에 나는 이것에게 무엇이 다른지 알기 위해 이것을 요청했습니다.formControlName그리고.[formControl].

제 은 을 사용하는 은 어떨까요? 입니다.formControlName중첩된 양식 그룹과 함께?

예를 들어, 다음과 같은 양식 구조를 가진 경우:

this.myForm = fb.group({
    'fullname': ['', Validators.required],
    'gender': [],
    'address': fb.group({
        'street': [''],
        'houseNumber': [''],
        'postalCode': ['']
    })
});

"street" (을 들어 "houseNumber" "postalCode") 를 HTML 입니까를 를 입니까?formControlName?

기본적으로 글꼴 구문에 정의된 컨트롤의 집합인 양식 그룹을 사용할 수 있으며, 예를 들어, formControlName 지시문을 사용하여 HTML 요소에 바인딩됩니다.

this.myForm = fb.group({
    'fullname': ['', Validators.required],
    'gender': [],
    'address': fb.group({
        'street': [''],
        'houseNumber': [''],
        'postalCode': ['']
    })
});

템플릿:

<form [formGroup]="myForm" >
   <div class="form-group">
      <label for="fullname">Username</label>
      <input type="text" id="username" formControlName="fullname" class="form-control">            
   </div>
   <div class="radio" *ngFor="let gender of genders">
      <label>
      <input type="radio" formControlName="gender" [value]="gender">{{ gender }} </label>
   </div>
   <div formGroupName="address">
      <div class="form-group">
         <label for="street">Username</label>
         <input type="text" id="username" value="street" formControlName="street" class="form-control">            
      </div>
      <div class="form-group">
         <label for="houseNumber">Username</label>
         <input type="text" id="username" value="street" formControlName="houseNumber" class="form-control">            
      </div>
      <div class="form-group">
         <label for="postalCode">Username</label>
         <input type="text" id="username" value="street" formControlName="postalCode" class="form-control">            
      </div>
   </div>
</form>

formGroup은 중첩된 formGroup으로 구성될 수 있으며 계층 구조는 위에서 계속될 수 있지만 값에 액세스할 때는 상당히 간단합니다.

사실입니다.양식 그룹 이름 보기

this.myForm = fb.group({
    'fullname': ['', Validators.required],
    'gender': [],
    'address': fb.group({
        'street': [''],
        'houseNumber': [''],
        'postalCode': ['']
    })
});

<form [formGroup]="myForm" >
   <div class="form-group">
      <label for="fullname">Username</label>
      <input type="text" id="username" formControlName="fullname" class="form-control">            
   </div>
   <div class="radio" *ngFor="let gender of genders">
      <label>
      <input type="radio" formControlName="gender" [value]="gender">{{ gender }} </label>
   </div>
   <div formGroupName="address">
      <div class="form-group">
         <label for="street">Username</label>
         <input type="text" id="username" value="street" formControlName="street" class="form-control">            
      </div>
      <div class="form-group">
         <label for="houseNumber">Username</label>
         <input type="text" id="username" value="street" formControlName="houseNumber" class="form-control">            
      </div>
      <div class="form-group">
         <label for="postalCode">Username</label>
         <input type="text" id="username" value="street" formControlName="postalCode" class="form-control">            
      </div>
   </div>
</form>

tl;dr:

양식을 중첩 양식 그룹을 사용하는 구성요소로 나눌 수 있으며, 양식 컨트롤 이름은 일반적으로 사용할 수 있습니다.

일반적으로 중첩 폼 그룹은 폼의 개별 부분을 지정하는 데 사용되기 때문에 사용하는 접근 방식은 폼을 구성 요소로 분할하고 중첩 폼 그룹을 입력 매개 변수로 전달하는 것입니다.그래서 당신의 경우, 저는 폼 그룹을 매개 변수로 삼는 주소 구성 요소를 가지고 있습니다.

<app-address [formGroup]="myForm.get('address')"></app-address

그리고 그 구성 요소 안에는 html에 사용되는 @Input() formGroup이 있습니다.

<div [formGroup]="formGroup">
....

이렇게 하면 컨트롤 이름이 이 폼 그룹의 일부가 되므로 평소처럼 컨트롤 이름을 명시적으로 참조할 수 있습니다.

또한 양식은 참고로 전달된 것임을 명심하시기 바랍니다.변경 사항은 상위 구성 요소의 myForm 요소에서 설명되며, 폼 그룹에 없는 폼의 일부(유효성 검사, 변경 탐지 등)에 액세스해야 하는 경우 항상 전체 폼을 전달하고 폼 그룹을 정의하여 내부 그룹을 명시적으로 참조할 수 있습니다.

<div [formGroup]="formGroup.get('adress')">

(assuming적으로 다음과 같은 전체 양식 개체를 전달합니다.

해피코딩!

앵글 10에서 문제가 생겨서 고생하고 있습니다.저는 "부모" 형태의 그룹 "forma"가 있으며 "기업"이라는 몇 개의 종속 그룹을 가지고 있으며, 동시에 "기업"은 다른 그룹인 msg Accounts 및 소셜 미디어와 두 명의 "자녀"를 가지고 있습니다.양식을 작성하고 제출하면 백엔드에 모든 것이 정확합니다. db에 이 데이터가 어떻게 올바르게 저장되어 있는지 알 수 있지만, 이 json을 받으면 "company.msgAccounts"와 "company"에 있는 데이터를 표시할 수 없습니다.제어(입력)에 "소셜 미디어"가 포함됩니다.서버에서 얻을 수 있는 것은 다음과 같습니다.

            {
            name:'',
            active: '',
            ........
            company:{
              msgAccounts:{line: "@linedemo", whatsapp: "0325554244"},
              socialMedia: {fb: '', tw: '', is: ''}
             }   
            ..........
            }
    
 this.forma = this.fb.group( {
          siteName  : [ '', [Validators.required, Validators.minLength(5)]],
          siteEmail  : [ '', [Validators.required, Validators.minLength(5)]],
          // defaultLocation: [ '', [Validators.required, Validators.minLength(10)]],
          active  : [ true, [Validators.required, Validators.minLength(5)]],
          mainLanguage: ['' , [Validators.required, Validators.minLength(2)]],
        
          company: this.fb.group({
            name: [''],
            address: [''],
            phone: [''],
            msgAccounts: this.fb.group({
              line: [],
              whatsapp: []
            }),
            socialMedia: this.fb.group({
              fb: [],
              is: [],
              tw: []
            })
          })
        });
    
    And the html: (Sorry about the indentation, when it was not easy using this editor, and I just pasted a part of the code in order to do it as shorter as possible).
    
            <mat-tab-group>   
                    <mat-tab label="settings">
                        <form autocomplete="off" >
                            <ng-template ng-template matTabContent> 
                                <mat-tab-group  [formGroup]="forma">
                                        <mat-tab label="global"> 
                                           // All this fields have are fine
                                         </mat-tab>
    
                                 <mat-tab formGroupName="company" label="company"> 
                                    <div class="card">
                                        <div class="card-header" id="headingTwo">
                                            <h5 class="mb-0">Details</h5>
                                        </div>
                                        <div id="company-details">
                                                <div class="form-group row">
                                                    <div class="col-sm-3">
                                                        <input 
                                                        type="text" 
                                                        class="form-control" 
                                                        id="name" 
                                                        name="name"
                                                        placeholder="Company name"
                                                        formControlName=name>
                                                    </div>
                        
                                                </div>
    
                             <div class="form-group row" formGroupName="msgAccounts">
                                                    <div class="col-sm-6">
                                             
                                                        <input 
                                                        type="text" 
                                                        class="form-control" 
                                                        id="line" 
                                                        name="line"
                                                        placeholder="line"
                                                        formControlName=line>
                                                    </div>
                                                    <div class="col-sm-6">
                                                    
                                                        <input 
                                                        type="text" 
                                                        class="form-control" 
                                                        id="whatsapp" 
                                                        name="whatsapp"
                                                        placeholder="whatsapp"
                                                        formControlName=whatsapp>
                                                    </div>
                                                </div>
    
                                                    
    
                             <div class="form-group row" formGroupName="socialMedia" >
                         
                                                    <div class="col-sm-6">
                                                        <input 
                                                        type="text" 
                                                        class="form-control" 
                                                        id="is" 
                                                        name="is"
                                                        placeholder="Is"
                                                        formControlName=is>
                                                    </div>
                                                </div>                             
                                            </div>
                                       </div>
                                </mat-tab>                 
               </mat-tab-group>  
                            <div class="form-group row">
                            <div class="col-sm-10">
                               <button type="submit" 
                                   (click)="saveConfig()">Save</button>
                            </div>
            </div>
                        
           </ng-template>
          </form>
       </mat-tab>
    </mat-tab-group>  

언급URL : https://stackoverflow.com/questions/44499425/how-to-use-formcontrolname-and-deal-with-nested-formgroup