Establecer valor predeterminado en Angular

1. Establecer valor predeterminado en angular
2. Establecer el valor predeterminado de une array de opciones en Angular
3. Seleccione el valor predeterminado de los valores dinámicos en Angular

Aprenderemos cómo establecer un valor predeterminado en un formulario select, establecer un valor predeterminado de une array de opciones y establecer un valor predeterminado si las opciones son dinámicas en Angular.

Establecer valor predeterminado en angular

Este tutorial discutirá cómo establecer un valor predeterminado para una etiqueta de selección en Angular. Ningún valor predeterminado se selecciona automáticamente al crear un formulario select con múltiples opciones.

Por lo tanto, primero crearemos un formulario de selección y estableceremos un valor predeterminado, y discutiremos diferentes escenarios sobre la mejor manera de establecer un valor predeterminado cuando las opciones son estáticas o dinámicas o cuando tenemos una variedad de opciones.

En app.component.html, crearemos un formulario select.

# angular
<select [(ngModel)]='ngSelect' name="selectOption" id="selectOption" class='form-control'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Añadiremos CSS en app.component.css para que nuestro formulario select tenga un mejor aspecto.

# angular
.form-control{
  padding: 5px 10px;
  background-color: DodgerBlue;
  color: white;
  border-color: black;
  width: 100px;
  height: 30px;
}
option:hover{
  background-color: white;
  color: dodgerblue;
}

Producción:

Puede ver que no se selecciona ningún valor predeterminado, pero todas las opciones aparecen cuando hacemos clic en él.

Para establecer cualquier valor como predeterminado, podemos asignar el valor a la variable ngSelect en app.component.ts. Si ve nuestro código de app.component.html, puede ver que ya asignamos la variable [(ngModel)]='ngSelect'.

Ahora intentemos establecer 1 como valor predeterminado.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngSelect = 1;
}

Después de asignar el valor predeterminado, notaremos que el formulario de selección muestra 1 como valor predeterminado actual. De esa manera, podemos seleccionar cualquier valor como valor predeterminado en Angular.

Producción:

Establecer el valor predeterminado de une array de opciones en Angular

Discutiremos la configuración de un valor predeterminado a partir de una serie de opciones.

En primer lugar, crearemos dos variables: ngSelect, la opción por defecto de nuestro formulario de selección, y la segunda será options que tendrá todos los valores que queremos mostrar en las opciones de selección.

Agreguemos este código en app.component.ts.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  options = [1,2,3,4,5,6,7,8,9,10]
  ngSelect = 1;
}

En el array options, establecemos valores de 1 a 10; en ngSelect, establecemos 1 como valor predeterminado.

Crearemos el formulario de selección en app.component.html.

# angular
<select class='form-control' id="selectOptions">
<option *ngFor="let opt of options"
[selected]="opt === ngSelect"
[value]="opt">
    {{ opt }}
</option>
</select>

En este código, puede ver que hemos configurado [seleccionado] en ngSelect, por lo que cuando cualquier opción sea igual a ngSelect, se seleccionará automáticamente.

Producción:

Seleccione el valor predeterminado de los valores dinámicos en Angular

Discutiremos la configuración de un valor predeterminado si tenemos valores dinámicos para las opciones.

En primer lugar, crearemos dos variables: ngSelect, la opción por defecto de nuestro formulario de selección, y la segunda será opciones que tendrá todos los valores que queremos mostrar en las opciones de Selección.

Sabemos que habrá valores dinámicos, así que tengamos une array de números aleatorios y establezcamos el valor predeterminado para el primer elemento de ese array.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  options = [3,6,1,4,2,10,7,5,9,8]
  ngSelect = this.options[0];
}

app.component.html tendrá el siguiente código.

# angular
<select class="form-control" id="selectOptions">
  <option
    *ngFor="let opt of options"
    [selected]="opt === ngSelect"
    [value]="opt"
  >
    {{ opt }}
  </option>
</select>

Producción:

Puede ver que el primer elemento de ese array se establece como un valor predeterminado. Podemos cambiar esto cambiando el índice de une array.

Este tutorial nos enseñó a establecer el valor predeterminado para el formulario select en Angular. También discutimos tres valores predeterminados con valores estáticos, dinámicos o de array.