CODEWITHSUNDEEP
angular
Thillai Narayanan
Thillai Narayanan

Reputation: 4896

Access formControlName inside custom component

Inputtypeformtext is our custom component. The purpose of this component is to display the textfield.

When I have the template within the component, I am able to able to see the values are getting tied with the fields.

    <input-type-form-text id="{{ question.value.questionId }}" [question]="question.value" 
    [form]="section">
<input type="text" class="form-control" formControlName="isSelected"/>
     <input-form-error></input-form-error>
    </input-type-form-text>

If I move the inline template and kept inside the custom component template, I am not able to add the field values to the form

 <input-type-form-text id="{{ question.value.questionId }}" [question]="question.value" 
    [form]="section">
    </input-type-form-text>

Inside the custom component template

<div class="screen-input-text-field dynamic-field form-group" [formGroup]="form">

      <input type="text" class="form-control" formControlName="isSelected"/>
             <input-form-error></input-form-error>
</div>

How to access or pass the formControlName inside the custom component. Can someone help on this.

Upvotes: 2

Views: 2788

Answers (1)

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9774

In order to access Reactive Form formcontrolname inside your own custom component, your custom component needs to implement ControlValueAccessor Interface.

@Component({
  selector: 'input-selectcontrol-form',
  templateUrl: '',
  styleUrls: [''],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => SelectFormControlComponent)
    }
  ]
})
export class SelectFormControlComponent implements OnInit, ControlValueAccessor {

  @Input() dropDownList;
  constructor() {}

  ngOnInit() {}

  writeValue(value: any) {
    if (value) {}

  }

  propagateChange(time: any) {
    console.log(time);
  }

  registerOnChange(fn) {
    this.propagateChange = fn;
  }

  registerOnTouched() {}
}

ReferenceLink : https://www.linkedin.com/pulse/angular-custom-form-control-controlvalueaccessor-ankit-rana

https://blog.angularindepth.com/never-again-be-confused-when-implementing-controlvalueaccessor-in-angular-forms-93b9eee9ee83

Upvotes: 1

Related Questions