Componente de entrada de formularios de Angular MDBootstrap

MDBootstrap es una biblioteca de interfaz de usuario angular basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar el componente de entrada de formularios en Angular MDBootstrap.

El componente de entrada de formularios le permite a un usuario crear un campo en el que el usuario puede ingresar algún texto, número, etc. Los formularios generalmente se usan para recibir y transmitir los datos del usuario.

Lista de tipos de entradas de formulario en MDBootstrap:

• botón : se utiliza para definir el botón en el que se puede hacer clic en el formulario.
• casilla de verificación : se utiliza para definir un campo de casilla de verificación.
• email : Se utiliza para definir un campo para las direcciones de correo electrónico.
• archivo : se utiliza para especificar el campo de selección de archivo y agregar un botón para elegir un archivo para cargarlo en el formulario.
• hidden : Se utiliza para definir la visibilidad de los elementos del formulario.
• número : se utiliza para especificar un campo de entrada para ingresar un número.
• contraseña : se utiliza para especificar el campo de contraseña de una etiqueta de entrada.
• radio : se utiliza para definir un botón de radio.
• rango : Se utiliza para definir el control de un número ingresado por el usuario. 
• reset : Se utiliza para definir un botón de reinicio.
• search : Se utiliza para definir un campo de texto que ingresó una string de búsqueda.
• enviar : se utiliza para definir un botón de envío.
• tel : Se utiliza para definir un campo que ingresa el número de teléfono de un usuario.
• text : Se utiliza para definir un campo de texto de una sola línea.
• textarea : Se utiliza para especificar una o más formas a las que pertenece el elemento <Textarea>. 

Sintaxis:

<div class="md-form">
   <input mdbInput/>
   <label>Label:</label>
</div>

Acercarse:

• Descarga Angular MDBootstrap desde el sitio oficial .
• Extraiga los archivos y cámbielos al directorio de trabajo.
• Instale npm en el proyecto actual usando el siguiente comando:

npm install

• Después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando:

cd appname

• Inicie el servidor con el siguiente comando:

ng serve

Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:

Ejemplo 1: este es el ejemplo básico que ilustra cómo usar el componente de entradas de formularios en Angular MDBootstrap.

aplicación.componente.html

<div id='gfg'>
    <h1>GeeksforGeeks</h1>
    <h4>Angular MDBootstrap Inputs Component</h4>
    <br />
    <div class="md-form">
        <input mdbInput placeholder="Input Text Here!" type="text" class="form-control"/>
        <label >Label:</label>
    </div>
</div>