FormControlName does not display placeholder option in select field

Question

FormControlName does not display placeholder option in select field

My issue involves a select element containing a form control name. When I utilize

<option value = "" selected disabled> Select </option>

with the reactForms library, the placeholder is not being displayed until the user makes a selection.

Here's the code snippet in HTML:

<form [formGroup]="formEndereco">
  <select formControlName="parentesco" id="parentesco" class="form-control input-lg" matInput>
    <option value="" selected="selected">Select</option>
    <option *ngFor="let itemParentesco of parentescos" [ngValue]="itemParentesco.name">
      {{itemParentesco.name }}</option>
  </select>
</form>

TypeScript section:

  gerarFormGroupEndereco() {
    this.formEndereco = this.formBuilder.group({
      parentesco: [],
      estado: [[Validators.required]]
  
    });
  }

Issues arise when using formControlName within the select element: https://i.sstatic.net/aKHP4.png

Removing formControlName from select results in: https://i.sstatic.net/3reLV.png

angular forms typescript bootstrap-4 angular8

Answer 1

Answer №1

The <select> element appears empty because the parentesco in your formGroup is initialized without a value, which defaults to null, resulting in no match with the available options and hence showing blank.

If you omit the formControlName, "Selecione" will show as it is the first option in the list.

To use an empty string as the default/placeholder selection, you can set it like this:

this.formEndereco = this.formBuilder.group({
      parentesco: [''],
      estado: [null, [Validators.required]]

    });

In addition, when using ReactiveForms, there's no need to explicitly set the selected attribute for the <option> element since the FormGroup value will handle the selection automatically.

Below is an example demonstrating how a null or "" value corresponds to the respective option.

<form [formGroup]="formEndereco">
  <select formControlName="parentesco" id="parentesco" matInput>
    <option [value]="null">Null</option>
    <option value="">Empty</option>
    <option value="foo">Selecione</option>
    <option value="bar">Selecione 2</option>
    <!-- <option *ngFor="let itemParentesco of parentescos" [ngValue]="itemParentesco.name">
      {{itemParentesco.name }}</option> -->
  </select>
</form>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-form-placeholder',
  templateUrl: './form-placeholder.component.html',
  styleUrls: ['./form-placeholder.component.css']
})
export class FormPlaceholderComponent implements OnInit {
  formEndereco: FormGroup;
  constructor(formbuilder: FormBuilder) {
    this.formEndereco = formbuilder.group({
      parentesco: [], // change to [''] to see empty option selected
      estado: [null, [Validators.required]]
    });
  }

  ngOnInit() {}
}

Answer 2

The <select> element appears empty because the parentesco in your formGroup is initialized without a value, which defaults to null, resulting in no match with the available options and hence showing blank.

If you omit the formControlName, "Selecione" will show as it is the first option in the list.

To use an empty string as the default/placeholder selection, you can set it like this:

this.formEndereco = this.formBuilder.group({
      parentesco: [''],
      estado: [null, [Validators.required]]

    });

In addition, when using ReactiveForms, there's no need to explicitly set the selected attribute for the <option> element since the FormGroup value will handle the selection automatically.

Below is an example demonstrating how a null or "" value corresponds to the respective option.

<form [formGroup]="formEndereco">
  <select formControlName="parentesco" id="parentesco" matInput>
    <option [value]="null">Null</option>
    <option value="">Empty</option>
    <option value="foo">Selecione</option>
    <option value="bar">Selecione 2</option>
    <!-- <option *ngFor="let itemParentesco of parentescos" [ngValue]="itemParentesco.name">
      {{itemParentesco.name }}</option> -->
  </select>
</form>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-form-placeholder',
  templateUrl: './form-placeholder.component.html',
  styleUrls: ['./form-placeholder.component.css']
})
export class FormPlaceholderComponent implements OnInit {
  formEndereco: FormGroup;
  constructor(formbuilder: FormBuilder) {
    this.formEndereco = formbuilder.group({
      parentesco: [], // change to [''] to see empty option selected
      estado: [null, [Validators.required]]
    });
  }

  ngOnInit() {}
}

FormControlName does not display placeholder option in select field

Answer №1

Similar questions

Issue: "The specified function type '(num: number) => number' cannot be assigned to type 'number'.(2322)"

Transferring variables between vanilla JS and Angular 2: A guide

When invoking a callback function that includes a conditional type, TypeScript mandates the inclusion of a parameter that intersects multiple types

Tips for implementing react-hook-form in an Ionic Modal?

How to implement scrollspy in Bootstrap 4 without relying on nav or list-group components?

Module for importing text without verifying types using wildcards

Divide the wordpress bootstrap4 navwalker header menu into two rows exclusively for smaller screens

Typescript Error: Trying to access a property that is undefined

The Angular HttpErrorResponse is a class used for handling

Creating a customized Axios instance in Typescript can provide more flexibility and control over

What could be causing IdentityServer 4 code flow to intermittently receive an invalid_grant response?

Angular micro front-end powered by module federation

Using Conditional Types in Supabase Query results in the TypeScript error, "Type is incompatible with type 'never'."

Unable to retrieve React state within the callback function

Is there a way to ensure that the await subscribe block finishes before moving on to the next line of code?

MongooseError: Timeout occurred after 10000ms while attempting to buffer the operation `users.findOne()` in a Next.js application

Develop a cutting-edge TypeScript library that allows for seamless resolution of optional dependencies by the application

Using Typescript, invoke functions within an object by specifying a string key

I'm struggling to figure out why my mr-auto isn't functioning properly (built with Bootstrap)

Transferring properties to components within ng-content (attributes that are not accessible in the component where the code is located)