Angular 형식과 지시문을 사용한 약간의 트릭 🃏

애플리케이션 내부의 여러 위치에서 사용하려는 양식이 있다고 상상해 보십시오. 양식의 레이아웃은 같지만 유효성 검사는 다릅니다.

우리의 경우 이 양식은 다단계 절차에서 사용되며 절차의 각 단계에서 양식이 더 제한적입니다. 보관할 수 있습니까DRY? 우리는이 문제가 있었고 다음 솔루션을 생각해 냈습니다.

양식

예를 들어 간단한 형식을 취해보자. 이름, 연락처 정보, 알레르기가 있는 사람이 있습니다.
처음에는 이름만 필요합니다. 나중에 우리는 그 사람의 나머지 정보를 요구할 것입니다.

@Component({
  selector: 'person',
  template: `
    <div [formGroup]="form">
      <div>
        <label>Name</label>
        <input type="text" formControlName="name" />
      </div>

      <div>
        <label>Contact info</label>
        <input type="text" formControlName="contactInfo" />
      </div>

      <div>
        <label>Allergies</label>
        <input type="text" formControlName="allergies" />
      </div>

      <strong>{{ form.valid ? 'valid' : 'invalid' }}</strong>
    </div>
  `,
})
export class PersonComponent {
  form = this.formBuilder.group({
    name: ['', Validators.required],
    contactInfo: [''],
    allergies: [''],
  })

  constructor(private formBuilder: FormBuilder) {}
}

기본적으로 사람의 이름을 필수 필드로 만듭니다.

지시문

Angular 지시문을 사용하여 구성 요소의 인스턴스를 주입하여 양식에 액세스할 수 있습니다. 우리의 경우 양식의 유효성 검사를 변경하고 더 많은 필드가 필요합니다.

@Directive({
  selector: 'person[stage-one]',
})
export class StageOneDirective {
  constructor(host: PersonComponent) {
    host.form.get('contactInfo').setValidators([Validators.required])
  }
}

지시문에 PersonComponent가 주입되도록 하려면 지시문을 person 형식에 맞게 만들어야 합니다. 이를 수행하기 위해 구성 요소의 선택기를 접두사로 사용하고 지시문 이름을 추가할 수 있습니다. person[stage-one] . 이렇게 하면 지시문이 사람 구성 요소의 속성으로 추가된 경우에만 지시문을 사용할 수 있습니다.
person 구성 요소의 양식이 public으로 설정되어 있기 때문에 지시문 내에서 양식에 액세스할 수 있습니다. 양식에 액세스할 수 있는 경우 양식 필드와 해당 유효성 검사기에 액세스할 수 있습니다.

동일한 접근 방식을 사용하여 더 엄격한 유효성 검사를 생성할 수 있습니다.

@Directive({
  selector: 'person[stage-two]',
})
export class StageTwoDirective {
  constructor(host: PersonComponent) {
    host.form.get('contactInfo').setValidators([Validators.required])
    host.form.get('allergies').setValidators([Validators.required])
  }
}

용법

이 작은 예제를 완성하기 위해 이것은 다른 구성 요소의 지시문과 함께 또는 없이 person 구성 요소를 사용하는 방법입니다.

<!-- Only the name is required -->
<person></person>

<!-- The name and the contactInfo are required -->
<person stage-one></person>

<!-- All fields are required -->
<person stage-two></person>

I find this a clean solution in combination with Control Value Accessors, as discussed in Working with Angular forms in an enterprise environment.

다음blitz에서 이 예제를 가지고 놀아보세요.