Páginas que usaremos en la sección de Formularios Reactivos

basic.html

<h2>Reactivos: Básicos</h2>
<hr>

<div class="row">
    <div class="col">

        <form autocomplete="off">

            <!-- Campo de producto -->
            <div class="mb-3 row">
                <label class="col-sm-3 col-form-label">Producto</label>
                <div class="col-sm-9">

                    <input type="text"
                           class="form-control"
                           placeholder="Nombre del producto">

                    <span class="form-text text-danger">
                        <!-- Debe de ser de 3 letras -->
                        error message
                    </span>
                </div>
            </div>

            <!-- Campo de producto -->
            <div class="mb-3 row">
                <label class="col-sm-3 col-form-label">Precio</label>
                <div class="col-sm-9">
                    <input type="number"
                           class="form-control"
                           placeholder="Precio del producto">
                    <span class="form-text text-danger">
                        El precio debe de ser 0 o mayor
                    </span>
                </div>
            </div>

            <!-- Campo de existencias -->
            <div class="mb-3 row">
                <label class="col-sm-3 col-form-label">Existencias</label>
                <div class="col-sm-9">
                    <input type="number"
                           class="form-control"
                           placeholder="Existencias del producto">

                    <span class="form-text text-danger">
                         Las existencias deben de ser 0 o mayor
                    </span>
                </div>
            </div>


            <div class="row">
                <div class="col">
                    <button type="submit"
                            class="btn btn-primary float-end">
                        Guardar
                    </button>
                </div>
            </div>



        </form>

    </div>
</div>




<div class="row">
    <div class="col">

        <span>Valid</span>
        <pre>{{ 'objeto' | json }}</pre>

        <span>Pristine</span>
        <pre>{{ 'objeto' | json }}</pre>

        <span>Touched</span>
        <pre>{{ 'objeto' | json }}</pre>

        <span>Value</span>
        <pre>{{ 'objeto' | json }}</pre>

        <span>Precio</span>
        <pre>{{ 'objeto' | json }}</pre>

        <span>Producto</span>
        <pre>{{ 'objeto' | json }}</pre>
    </div>
</div>

country-page.component.html

<h1 class="mt-3">Selectores anidados</h1>
<hr />

<form>
  <!-- Region -->
  <div class="row mb-3">
    <div class="col">
      <label class="form-label">Continente:</label>
      <select formControlName="region" class="form-control">
        <option value="">-- Seleccione Continente --</option>
        
        <!-- <option [value]="region">
          {{ region }}
        </option> -->
        
      </select>
    </div>
  </div>

  <!-- Countries -->

  <div class="row mb-3">
    <div class="col">
      <label class="form-label">País:</label>
      <select formControlName="country" class="form-control">
        <option value="">-- Seleccione País --</option>

        <!-- <option [value]="country.cca3">
          {{ country.name }}
        </option> -->

      </select>
    </div>
  </div>


  <!-- Countries -->

  <div class="row mb-3">
    <div class="col">
      <label class="form-label">Fronteras:</label>
      <select formControlName="border" class="form-control">
        <option value="">-- Seleccione la frontera --</option>


        <!-- <option [value]="country.cca3">
          {{ country.name }}
        </option> -->
      </select>
    </div>
  </div>

</form>

<h3>Formulario</h3>
<code>
  <!-- {{ 'myForm.value' | json }} -->
</code>
<p>is form valid: {{ 'myForm.valid' }}</p>

dynamic.html

<h2>Reactivos: <small> Dinámicos </small></h2>
<hr>

<form autocomplete="off">

    <!-- Nombre -->
    <div class="mb-3 row">
        <label class="col-sm-3 col-form-label">Nombre</label>
        <div class="col-sm-9">
            <input class="form-control"
                   placeholder="Nombre de la persona">
            <span class="form-text text-danger">
                   error message
            </span>
        </div>
    </div>

    <!-- Agregar Favorito -->
    <div class="mb-3 row">
        <label class="col-sm-3 col-form-label">Agregar</label>
        <div class="col-sm-9">

            <div class="input-group">
                <input class="form-control"
                       placeholder="Agregar favorito">


                <button class="btn btn-outline-primary"
                        type="button">
                    Agregar favorito
                </button>
            </div>
        </div>
    </div>


    <!-- Lista de Juegos Favoritos -->
    <div class="mb-3 row">
        <label class="col-sm-3 col-form-label">Favoritos</label>
        <div class="col-sm-9">

            <div class="mb-1">

                <div class="input-group">
                    <input class="form-control">

                    <button class="btn btn-outline-danger"
                            type="button">
                      Eliminar
                  </button>
                </div>
                <span class="form-text text-danger">
                   Este campo es requerido
                </span>

            </div>

        </div>
    </div>



    <div class="row">
        <div class="col-sm-12">
            <button type="submit"
                    class="btn btn-primary float-end"
                    >
                    <!-- [disabled]="myForm.invalid" -->
                Guardar
            </button>
        </div>
    </div>


</form>



<span>Valid</span>
<pre>{{ 'object' | json }}</pre>
<br>

<span>Value</span>
<pre>{{ 'object' | json }}</pre>
<br>

<span>Agregar Juego</span>
<pre>{{ 'object' | json }}</pre>
<pre>{{ 'object' | json }}</pre>

register.html

<h2>Validaciones Reactivas</h2>
<hr>

<div class="row">
    <div class="col">

        <form autocomplete="off">

            <!-- Nombre -->
            <div class="row mb-3">
                <label class="col-sm-3 col-form-label">Nombre y apellido</label>
                <div class="col-sm-9">
                    <input type="text"
                           class="form-control"
                           placeholder="Nombre del usuario">

                    <span class="form-text text-danger">
                        Debe de ser en formato de nombre y apellido
                    </span>
                </div>
            </div>

            <!-- Email -->
            <div class="row mb-3">
                <label class="col-sm-3 col-form-label">Email</label>
                <div class="col-sm-9">
                    <input type="email"
                           class="form-control"
                           placeholder="Email del usuario">
                    <span class="form-text text-danger">
                        mensaje de error del email
                    </span>
                </div>
            </div>

            <!-- Username -->
            <div class="row mb-3">
                <label class="col-sm-3 col-form-label">Username</label>
                <div class="col-sm-9">
                    <input type="text"
                           class="form-control"
                           placeholder="Nombre código del usuario">
                    <span class="form-text text-danger">
                         El username no puede ser Strider
                    </span>
                </div>
            </div>

            <!-- Password -->
            <div class="row mb-3">
                <label class="col-sm-3 col-form-label">Password</label>
                <div class="col-sm-9">
                    <input type="password"
                           class="form-control"
                           placeholder="Password de su cuenta">

                    <span class="form-text text-danger">
                         La contraseña debe de ser mayor de 6 caracteres.
                    </span>
                </div>
            </div>

            <!-- Password2 -->
            <div class="row mb-3">
                <label class="col-sm-3 col-form-label">Confirmar</label>
                <div class="col-sm-9">
                    <input type="password"
                           class="form-control"
                           placeholder="Confirmar la contraseña">

                    <span class="form-text text-danger">
                         Las contraseñas deben de ser iguales
                    </span>
                </div>
            </div>


            <div class="row">
                <div class="col">
                    <button class="btn btn-primary float-end"
                            type="submit">
                        Crear
                    </button>
                </div>
            </div>


        </form>
    </div>
</div>


<h2>Form Valid: </h2>
<h2>Form Status: </h2>
<h2>Form Pending: </h2>
<h2>Form errors</h2>
<pre>{{ 'formulario' | json }}</pre>

<h5>Nombre</h5>
<pre>{{ 'formulario' | json }}</pre>

<h5>Email</h5>
<pre>{{ 'formulario' | json }}</pre>

<h5>Username</h5>
<pre>{{ 'formulario' | json }}</pre>


<h5>Password</h5>
<pre>{{ 'formulario' | json }}</pre>

<h5>Confirmar</h5>
<pre>{{ 'formulario' | json }}</pre>

switches.html

<h2>Reactivos: Switches</h2>
<hr>


<form autocomplete="off">

    <!-- Radio -->
    <div class="row mb-3">
        <label class="col-sm-3 col-form-label">Género</label>
        <div class="col-sm-9">

            <div class="form-check">
                <input class="form-check-input"
                       type="radio"
                       value="M"
                       id="radioMasculino">
                <label class="form-check-label" for="radioMasculino">
                  Masculino
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input"
                       type="radio"
                       value="F"
                       id="radioFemenino">
                <label class="form-check-label" for="radioFemenino">
                  Femenino
                </label>
            </div>

        </div>
    </div>

    <!-- Switches -->
    <div class="row mb-3">
        <label class="col-sm-3 col-form-label">Notificaciones</label>
        <div class="col-sm-9">

            <div class="form-check form-switch mt-2">
                <input class="form-check-input"
                       type="checkbox"
                       id="flexSwitchCheckChecked">
                <label class="form-check-label" for="flexSwitchCheckChecked">Quiero recibir notificaciones</label>
            </div>

        </div>
    </div>

    <!-- Switches -->
    <div class="row mb-3">
        <label class="col-sm-3 col-form-label"></label>
        <div class="col-sm-9">
            <div class="form-check">
                <input class="form-check-input"
                       type="checkbox"
                       id="flexCheckDefault">
                <label class="form-check-label" for="flexCheckDefault">
                  Términos y condiciones de uso
                </label>
              </div>
              <span class="form-text text-danger">
                 Debe de aceptar las condiciones de uso
              </span>

        </div>
    </div>


    <!-- Boton submit -->
    <div class="row">
        <div class="col">
            <button class="btn btn-primary float-end"
                    type="submit">
                Guardar
            </button>
        </div>
    </div>

</form>


<h5>Valor del formulario</h5>
<pre>{{ 'object' | json }}</pre>
<br>

<h5>Persona</h5>
<pre>{{ 'object' | json }}</pre>
<br>

<h5>Valid</h5>
<pre>{{ 'object' | json }}</pre>

<!-- <h5>Términos</h5> -->
<!-- <pre>{{ myForm.controls?.terminos?.errors | json }}</pre> -->

<!-- <br>
<pre>Condiciones: </pre> -->

✨✨

✨✨

gracias desde Brasil

Nice

✨✨

✨✨

Gracias profe desde Argentina !🚀🚀