Exploring the utilization of ngModel within a tag that is selector-based

Question

Exploring the utilization of ngModel within a tag that is selector-based

As a newcomer to Angular 2, I have encountered a challenge with forms that contain multiple text boxes, checkboxes, labels, and drop-downs. When including all these controls in my HTML, the page becomes too long. To address this issue, I would like to create separate components for each control and then use them as selectors within my main component's HTML file.

However, I am unsure how to access the value of each control if I have 10 text boxes, 10 drop-down menus, and multiple labels. Does anyone have experience or knowledge regarding this matter?

If I were to use ngModel for each separate component, how would I go about accessing the values for each individual control?

angular typescript

Answer 1

Answer №1

Create your own custom component with ease

@Component({
  selector: 'my-textinput',
  template: `<div class="form-group">
                    <label><ng-content></ng-content>
                        <input [(ngModel)]="value"
                                class="form-control"
                                (blur)="onBlur()" >
                    </label>
                </div>`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => TextInputCellEditorComponent),
      multi: true
    }
  ]
})
export class TextInputCellEditorComponent implements ControlValueAccessor, OnInit, OnDestroy {

  private value: any;

  constructor(private el: ElementRef) {
    super();
  }

  ngOnInit() {
    super.ngOnInit();
  }

  /**
   * Set the editor's value
   */
  public writeValue(value:any) {
    this.value = value;
  }

  /**
   * Subscribe to changes
   */
  public registerOnChange(fn) {

  }

  /**
   * Register touch events
   */
  public registerOnTouched(fn) {

  }

  ngOnDestroy() {

  }
}

Integrate this custom component into your project effortlessly

<form>
    <my-textinput name="anyValue"
                  [(ngModel)]="anyModel">
    </my-textinput>
  </form>

Answer 2

Create your own custom component with ease

@Component({
  selector: 'my-textinput',
  template: `<div class="form-group">
                    <label><ng-content></ng-content>
                        <input [(ngModel)]="value"
                                class="form-control"
                                (blur)="onBlur()" >
                    </label>
                </div>`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => TextInputCellEditorComponent),
      multi: true
    }
  ]
})
export class TextInputCellEditorComponent implements ControlValueAccessor, OnInit, OnDestroy {

  private value: any;

  constructor(private el: ElementRef) {
    super();
  }

  ngOnInit() {
    super.ngOnInit();
  }

  /**
   * Set the editor's value
   */
  public writeValue(value:any) {
    this.value = value;
  }

  /**
   * Subscribe to changes
   */
  public registerOnChange(fn) {

  }

  /**
   * Register touch events
   */
  public registerOnTouched(fn) {

  }

  ngOnDestroy() {

  }
}

Integrate this custom component into your project effortlessly

<form>
    <my-textinput name="anyValue"
                  [(ngModel)]="anyModel">
    </my-textinput>
  </form>

Exploring the utilization of ngModel within a tag that is selector-based

Answer №1

Similar questions

What's Causing the UNMET PEER DEPENDENCY Error in Angular 8 with @angular/[email protected]?

Tips for updating a session cookie in nestjs

Is it possible to implement Typescript validation for the properties of an object that is returned from a callback function passed to a generic React

Guide to setting a default value for a select option in Angular 2+

Tips for troubleshooting the error message: "The relative import path "$fresh/dev.ts" is not prefaced with / or ./ or ../"

Angular 5 displaying error message: "The requested resource does not have the 'Access-Control-Allow-Origin' header."

Can TypeORM create an entity for a many-to-many relationship that functions like ActiveRecord's join table concept?

Error message indicating that the Angular validator function is not properly defined

Angular List Selector: A versatile multiple selection component with a stylish list design

Using React's useState hook with an empty array

When utilizing makeStyles in @mui, an error may occur stating that property '' does not exist on type 'string'

A step-by-step guide on bundling a TypeScript Language Server Extensions LSP using WebPack

Utilizing TypeScript Generics for Creating Arrays of Objects with Inherited Type Definitions

Should mutators be encapsulated within a class contained in a JS Module for better code organization and maintainability?

Having trouble with combining two formgroups using concat in an Angular application

Is it possible to access NgbdModalContent properties from a different component?

Encountering a 403 Error when Configuring POST Requests in Angular 6 Proxy

Communicating Between Children Components in Angular 2

Stopping Angular2 HTTP Requests - A Guide to Aborting or Cancelling Executing Requests

React: Why aren't class methods always running as expected?