각도 2를 사용하는 동적 폼 유효성 검사

Question

저는 앵귤러 2 어플리케이션을 개발하고 서브 섹션 템플릿에서 폼 필드를 동적으로 (json을 사용하여) 생성하고 있습니다.
양식이 유효하지 않은 경우 제출 버튼을 비활성화하고 싶습니다.

<h1>Form Validation</h1> 
<div > 
<form #loginForm="ngForm"> 
    <subsection [question]="fieldsData"></subsection> 
    <button type="submit" [disabled]="!loginForm.form.valid">Submit</button> 
</form> 
</div> 

하위 섹션 내가 버튼을

만든 plunker 링크를 작성하는 모든 필수 필드 후 사용하도록 설정해야합니다 제출 요구가

<div *ngFor="let data of question"> 
<label> {{data.displayName}}</label> 
<input type="data.dataType" name="data.fieldId" [(ngModel)]="data.fieldValue" required name="data.fieldId" #name="ngModel"> 
<div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger"> 
    <div [hidden]="!name.errors.required"> 
     Name is required 
    </div>  
</div> 
<br><br> 

다음과 같이 Here

Answer 1

plunkr을 바탕으로 모델의 양식 필드를 정의하는 것처럼 (fieldsData 배열은 AppComponent으로 정의 됨) 템플릿 설명 형식 대신에 reactive form을 사용하는 것이 더 나을 것입니다.

loginForm.value을 디버그하면 하위 구성 요소의 input 필드가 더 넓은 폼에 참여하지 않기 때문에 현재 템플릿 접근 방식에서 원하는 유효성 검사 동작을 제공하지 않습니다. 이름 필드가 양식 - 양식을 제출할 때 양식에 해당 필드에 입력 된 데이터가 들어 있지 않음을 의미합니다.

대체 방법은 ControlValueAccessor을 here과 같이 구현하여 양식에 참여시키는 것입니다.하지만 이렇게하면 복잡 할 수도 있습니다.

더 간단한 방법은 (1) 반응 형을 사용하거나 (2) 중첩 된 하위 섹션 구성 요소를 전혀 사용하지 않는 것입니다.

<form #loginForm="ngForm"> 

    <div *ngFor="let data of fieldsData"> 
     <label> {{data.displayName}}</label> 
     <input type="data.dataType" [(ngModel)]="data.fieldValue" required  [name]="data.fieldId" #name="ngModel"> 
     <div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger"> 
      <div [hidden]="!name.errors.required"> 
       {{data.displayName}} is required 
      </div>  
     </div> 
     </div> 
    <button type="submit" [disabled]="!loginForm.form.valid">Submit</button> 

    Form contains: {{loginForm.value | json }} 

</form> 

Answer 2

question.component.html

<form #loginForm="ngForm"> 
<div *ngFor="let data of question"> 
    <label> {{data.displayName}}</label> 
    <input type="data.dataType" [(ngModel)]="data.fieldValue" required name="data.fieldId" #name="ngModel"> 
    <div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger"> 
     <div [hidden]="!name.errors.required"> 
      {{data.displayName}} is required 
     </div>  
    </div> 
    <br><br> 
</div> 
<button type="submit" [disabled]="loginForm.invalid">Submit</button> 
</form> 

는 위의 당신이 * ngIf를 사용하여 활성화 위를 사용하여 제출 '버튼을 비활성화합니다. 위의 코드를! loginForm.valid로 사용할 수도 있습니다. GabrieleB - 데이비드 양식 필드는 하위 템플릿에로드 @

app.component.html

<h1>Form Validation</h1> 
    <subsection [question]="fieldsData"></subsection>