Component property becomes null after adding formControlName attribute

Question

I'm trying to setup validation for a component in a reactive form. The component is working fine until I add formControlName="sellerName" to the component, now I get this error:

ERROR TypeError: Cannot read property 'name' of null

Form Component HTML: Where the selectedItem is the null object

<app-dropdown-select formControlName="sellerName" <-- Removing this makes it work
                     [dropdownItems]="sellers">
</app-dropdown-select>

Dropdown Component HTML/template

<div class="button-container">
  <div class="dropdown-button"
       (click)="onClick($event)"
       [class.dropdown-active]="showList && !combinedInput"
       [class.dropdown-input-active]="showList && combinedInput">
    <div class="downdown-selected-item">
      {{selectedItem.name}} {{selectedItem.unit}}
    </div>
    <span class="spacer"></span>
    <i class="material-icons">
      {{buttonIcon}}
    </i>
  </div>

  <div class="dropdown-items" *ngIf="showList">
    <div *ngFor="let item of dropdownItems" (click)="onClickItem(item)" class="dropdown-item">
      {{item.name}},
      {{item.description}}
    </div>
  </div>
</div>

Component:

@Component({
  selector: 'app-dropdown-select',
  templateUrl: './dropdown-select.component.html',
  styleUrls: ['./dropdown-select.component.scss'],
  providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => DropdownSelectComponent),
            multi: true
        }
    ]
})
export class DropdownSelectComponent implements ControlValueAccessor {

  @Input() combinedInput: boolean;
  @Input() dropdownItems: DropdownItem[];
  @Output() selectedItem: DropdownItem;

  propagateChange = (_: any) => {};
  showList: boolean;
  buttonIcon: string;

  constructor(private el: ElementRef) { }

  ngOnInit() {
    this.buttonIcon = BUTTON_ICON_INACTIVE;
    this.selectedItem = this.dropdownItems[0];
    console.log(this.dropdownItems);
  }

  onClick() {
    this.toggleShowList();
  }

  toggleShowList() {
    this.showList = !this.showList;
    if (!this.showList) {
      this.buttonIcon = BUTTON_ICON_INACTIVE;
    } else {
      this.buttonIcon = BUTTON_ICON_ACTIVE;
    }
  }

  onClickItem(item) {
    this.showList = false;
    this.selectedItem = item;
        this.propagateChange(this.selectedItem);
  }

  writeValue(value: any) {
    if (value !== undefined) {
        this.selectedItem = value;
    }
  }

  registerOnChange(fn) {
     console.log('register change');
     this.propagateChange = fn;
  }

  registerOnTouched() {}

}

Form group:

this.myForm = this.fb.group({
  name: ['', [Validators.required, Validators.minLength(3)]],
  description: ['', [Validators.required, Validators.minLength(10)]],
  cost: [],
  amount: [],   // component
  sellerName: [], // component
  sellerUrl: []
});

Stackblitz: https://stackblitz.com/edit/angular-rahzjd

Why does this error occur after I add the formControlName attribute and how can I get the value of a list item into the form builder to validate it?

@coder, try make that the error say you: add property "name" < app-dropdown-select name="name" formControlName="sellerName" [dropdownItems]="sellers" > — Eliseo
– Eliseo, Commented Dec 11, 2018 at 11:36
Using safe-navigation operator {{selectedItem?.name}} {{selectedItem?.unit}} should work for you — yurzui
– yurzui, Commented Dec 12, 2018 at 4:48
@yurzui it works now, how do I get the selectedItem values when they change in myForm — coder
– coder, Commented Dec 12, 2018 at 5:05

Marshal · Accepted Answer · 2018-12-13 02:13:19Z

1

Because you are using ReactiveForms, by setting the formControlName on the field it will allow the value to be set in the control, and you will be able to get your form values via console.log(this.dataForm.value) in your onSubmit().

Please Note: Passing an empty array for the formControl sellerName: [], results in ERROR Error: Cannot read property 'name' of null... you need to pass something, passing '' in sellerName: [''], resolves the error.

Please see stackblitz below. When you fill out the form and submit, your values are logged in console properly.

Stackblitz

https://stackblitz.com/edit/angular-mjqjsc?embed=1&file=src/app/form/form.component.html

answered Dec 13, 2018 at 2:13

Marshal

11.2k3 gold badges40 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Component property becomes null after adding formControlName attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related