Truy cập FormControl từ thành phần biểu mẫu tùy chỉnh trong Angular

Question

Tôi có một thành phần điều khiển biểu mẫu tùy chỉnh trong ứng dụng Góc của tôi, thực hiện giao diện ControlValueAccessor.

Tuy nhiên, tôi muốn truy cập phiên bản FormControl, được liên kết với thành phần của tôi. Tôi đang sử dụng biểu mẫu phản hồi với FormBuilder và cung cấp điều khiển biểu mẫu bằng cách sử dụng thuộc tính formControlName.

SO, làm cách nào để truy cập vào ví dụ FormControl từ bên trong thành phần biểu mẫu tùy chỉnh của tôi?

Answer 1

Giải pháp này được sinh ra từ the discussion trong kho lưu trữ Góc. Xin vui lòng, hãy chắc chắn để đọc nó hoặc thậm chí tốt hơn để tham gia nếu bạn quan tâm đến vấn đề này.

---

Tôi đã nghiên cứu các quy tắc ứng FormControlName chỉ thị và nó truyền cảm hứng cho tôi viết những giải pháp sau đây:

@Component({ 
    selector: 'my-custom-form-component', 
    templateUrl: './custom-form-component.html', 
    providers: [{ 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: CustomFormComponent, 
    multi: true 
    }] 
}) 
export class CustomFormComponent implements ControlValueAccessor, OnInit { 

    @Input() formControlName: string; 

    private control: AbstractControl; 


    constructor (
    @Optional() @Host() @SkipSelf() 
    private controlContainer: ControlContainer 
) { 
    } 


    ngOnInit() { 

    if (this.controlContainer) { 
     if (this.formControlName) { 
     this.control = this.controlContainer.control.get(this.formControlName); 
     } else { 
     console.warn('Missing FormControlName directive from host element of the component'); 
     } 
    } else { 
     console.warn('Can\'t find parent FormGroup directive'); 
    } 

    } 

} 

Tôi tiêm phụ huynh FormGroup với thành phần và sau đó nhận được cụ thể FormControl từ nó sử dụng tên điều khiển thu được thông qua ràng buộc formControlName.

Tuy nhiên, lưu ý rằng giải pháp này được điều chỉnh riêng cho trường hợp sử dụng khi chỉ thị FormControlName được sử dụng trên phần tử máy chủ lưu trữ. Nó sẽ không hoạt động trong các trường hợp khác. Đối với điều này, bạn sẽ cần phải thêm một số logic bổ sung. Nếu bạn nghĩ rằng, điều này nên được giải quyết bằng Angular, hãy chắc chắn đến thăm the discussion.

Answer 2

Như @Ritesh đã viết bằng những nhận xét bạn có thể vượt qua điều khiển biểu mẫu như một đầu vào ràng buộc:

<my-custom-form-component [control]="myForm.get('myField')" formControlName="myField"> 
</my-custom-form-component> 

Và sau đó bạn có thể nhận được dụ điều khiển biểu mẫu bên trong thành phần hình thức tùy chỉnh của bạn như thế này:

@Input() control: FormControl;