유효성 검사를 통해 양식을 여러 구성요소로 분할

유효성 검사를 통해 양식을 여러 구성요소로 분할

저는 각이 2개인 하나의 큰 형태를 만들고 싶습니다.그러나 다음 예제와 같이 여러 구성요소로 이 양식을 만들고 싶습니다.

(앱 구성요소)

<form novalidate #form1="ngForm" [formGroup]="myForm">
<div>
    <address></address>
</div>
<div>
    <input type="text" ngModel required/>
</div>

<input type="submit" [disabled]="!form1.form.valid" > </form>

주소 구성 요소

<div>
<input type="text" ngModel required/> </div>

위의 코드를 사용하면 브라우저에서 필요에 따라 볼 수 있지만 주소 구성 요소에서 텍스트를 삭제할 때 제출 버튼이 비활성화되지 않았습니다.
하지만 앱 구성 요소의 입력란에 있는 텍스트를 삭제했을 때 버튼이 올바르게 비활성화되었습니다.

저는 꽤 잘 작동하는 반응형을 사용할 것이며, 당신의 의견에 대해:

이것에 대한 다른 간단한 예가 있습니까?아마도 루프가 없는 동일한 예일 것입니다.

예를 들어 보겠습니다.당신이 해야 할 일은, 둥지를 짓는 것입니다.FormGroup그리고 그것을 아이에게 물려줍니다.

만약 당신의 폼이 이렇게 생겼다고 가정하고 당신이 합격하기를 원한다고 가정해 봅시다.address그룹에서 하위 그룹으로:

ngOnInit() {
  this.myForm = this.fb.group({
    name: [''],
    address: this.fb.group({ // create nested formgroup to pass to child
      street: [''],
      zip: ['']
    })
  })
}

그런 다음 부모에서 중첩된 양식 그룹을 전달합니다.

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

경우에는 의녀경우를 합니다.@Input중첩된 양식 그룹의 경우:

@Input() address: FormGroup;

에는 템릿에다사니다합용을음서플을 합니다.[formGroup]:

<div [formGroup]="address">
  <input formControlName="street">
  <input formControlName="zip">
</div>

실제 중첩된 양식 그룹을 만들지 않으려면 이 작업을 수행할 필요가 없습니다. 부모 양식을 자식에게 전달하여 양식이 다음과 같이 보이도록 할 수 있습니다.

this.myForm = this.fb.group({
  name: [''],
  street: [''],
  zip: ['']
})

당신은 당신이 원하는 모든 통제를 통과할 수 있습니다.위와 동일한 예를 사용하여, 우리는 단지 보여주고자 합니다.street그리고.zip하위 구성 요소는 동일하게 유지되지만 템플릿의 하위 태그는 다음과 같습니다.

<address [address]="myForm"></address>

여기에

첫 번째 옵션 데모, 두 번째 데모입니다.

내포된 모델 기반 양식에 대한 자세한 내용은 여기를 참조하십시오.

템플릿 기반 양식에서도 이를 수행할 수 있는 방법이 있습니다.ngModel은 각 구성 요소에 별도의 양식을 자동으로 생성하지만, 이 양식을 구성 요소에 추가하여 상위 구성 요소의 양식을 주입할 수 있습니다.

@Component({
viewProviders: [{ provide: ControlContainer, useExisting: NgForm}]
}) export class ChildComponent

그러나 각 입력에 고유한 이름이 있는지 확인해야 합니다.따라서 *ngFor를 사용하여 자식 구성 요소를 호출하는 경우 인덱스(또는 다른 고유 식별자)를 이름에 넣어야 합니다. 예:

[name]="'address_' + i"

양식을 FormGroups로 구성하려면 ModelGroup을 사용하고

viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }]

ngForm and add ngForm and add 신대[ngModelGroup]="yourNameHere"태그가 포함된 일부 하위 구성 요소 html로 이동합니다.

제 경험으로 볼 때, 이런 종류의 양식 필드 구성은 템플릿 기반 양식으로는 만들기 어렵습니다.주소 구성 요소에 포함된 필드는 양식(NgForm.controls 개체)에 등록되지 않으므로 양식을 검증할 때 고려되지 않습니다.

• 모든 유효성 검사를 사용하여 ControlValueAccessor 구성 요소(ngModel 특성을 허용함)를 생성할 수 있지만 유효성 검사 오류를 표시하고 변경 사항을 전파하기가 어렵습니다(주소는 복잡한 값을 가진 단일 양식 필드로 간주됨).
• 양식 참조를 주소 구성 요소에 전달하고 내부 컨트롤을 등록할 수 있지만, 저는 시도해 본 적이 없고 이상한 접근 방식인 것 같습니다(어디에서도 본 적이 없습니다).
• 템플릿 기반이 아닌 반응형으로 전환하고, 주소를 나타내는 양식 그룹 개체를 주소 구성 요소로 전달하여 양식 정의에 유효성 검사를 유지할 수 있습니다.https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2 에서 예제를 볼 수 있습니다.

저는 제 경우에 효과가 있었던 접근법을 공유하고 싶습니다.다음과 같은 지침을 작성했습니다.

import { Directive } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';

@Directive({
  selector: '[appUseParentForm]',
  providers: [
    {
      provide: ControlContainer,
      useFactory: function (form: NgForm) {
        return form;
      },
      deps: [NgForm]
    }
  ]
})
export class UseParentFormDirective {
}

이제 하위 구성 요소에 이 지시문을 사용하면 다음과 같습니다.

<address app-use-parent-form></address>

주소 구성요소의 컨트롤이 양식 1에 추가됩니다.따라서 양식 유효성도 하위 구성 요소 내부의 제어 상태에 따라 달라집니다.

Angular 6에서만 확인됨

Angular 2+의 최신 버전에서는 formGroup 인스턴스를 자식에게 입력으로 전달하지 않고도 여러 구성 요소에 폼을 뱉을 수 있습니다.

이 공급자를 하위 구성 요소로 가져오면 이 작업을 수행할 수 있습니다.

viewProviders: [{provide: ControlContainer,useExisting: FormGroupDirective}]

그런 다음 Group Directive 양식을 삽입하여 기본 양식에 액세스할 수 있습니다.

constructor(private readonly formGroupDirective: FormGroupDirective)

가장 많이 업데이트된 의견은 상용어구입니다.저는 이런 방식으로 프로젝트를 진행해 본 적이 있는데, 이를 관리하는 것은 정말 어려운 일입니다.

@elia 사용자의 답변에 감사드립니다.

좀 더 편리하게 하기 위해서는 공급업체를 계속해서 배치할 수 있다는 것을 덧붙일 수 밖에 없습니다.

import { Provider } from '@angular/core';
import { ControlContainer, FormGroupDirective } from '@angular/forms';

export const FormPart: Provider = {
  provide: ControlContainer,
  useExisting: FormGroupDirective,
};

다음과 같은 원하는 구성 요소로 가져옵니다.

@Component({
  ...
  viewProviders: [FormPart],
})

또한 언급된 생성자 코드로 지시문을 작성하여 필요한 경우 상위 양식을 제공하므로 양식 비즈니스 로직을 더 작은 청크로 분리할 수 있습니다.

@ComponentProvider를 확장하기 위해 Angular에서 데코레이터가 어떻게 작동하는지 탐색하려고 했지만, 더 복잡한 주제여서 불가능한 것 같아 포기했습니다.이것에 대한 다른 사람들의 경험을 들으면 기쁠 것입니다.Angular가 복잡한 형태를 지원하고 작업을 쉽게 할 수 있는 좋은 기능이라고 생각합니다.

언급URL : https://stackoverflow.com/questions/43270564/dividing-a-form-into-multiple-components-with-validation