data.compononent.html

<!-- data.component.html -->

<h4>Formularios <small>data</small></h4>
<hr>
<form [formGroup]="forma" (ngSubmit)="guardarCambios()">
    <!-- <form [formGroup]="forma"> -->
    <div formGroupName="nombrecompleto">
        <!-- [ngClass]="{ 'has-danger': !forma.get('nombre').valid }" -->
        <div class="form-group row" [ngClass]="{ 'has-danger': !forma.controls['nombrecompleto'].controls['nombre'].valid  && forma.controls['nombrecompleto'].controls['nombre'].touched}">
            <label class="col-2 col-form-label">Nombre</label>
            <div class="col-8">

                <input class="form-control" type="text" placeholder="Nombre" formControlName="nombre">

                <div class="form-control-feedback" *ngIf="forma.get('nombrecompleto.nombre').errors?.required">
                    El campo es requerido
                </div>

                <div class="form-control-feedback" *ngIf="forma.get('nombrecompleto.nombre').errors?.minlength">
                    Requiere al menos 5 caracteres
                </div>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-2 col-form-label">Apellido</label>
            <div class="col-8">

                <input class="form-control" type="text" placeholder="Apellido" formControlName="apellido">
            </div>
        </div>

    </div>

    <div class="form-group row">
        <label class="col-2 col-form-label">Correo</label>
        <div class="col-md-8">

            <input class="form-control" type="email" placeholder="Correo electrónico" formControlName="correo">
        </div>
    </div>

    <div class="form-group row">
        <label class="col-2 col-form-label">Usuario</label>
        <div class="col-md-8">

            <input class="form-control" type="text" placeholder="Usuario" formControlName="usuario">
        </div>
    </div>

    <div class="form-group row">
        <label class="col-2 col-form-label">Correo</label>
        <div class="col-md-8">

            <input class="form-control" type="password" placeholder="Contraseña" formControlName="password1">
        </div>
    </div>

    <div class="form-group row">
        <label class="col-2 col-form-label">Correo</label>
        <div class="col-md-8">

            <input class="form-control" type="password" placeholder="Verifíca tu contraseña" formControlName="password2">
        </div>
    </div>

    <div class="form-group row">
        <label class="col-2 col-form-label">Pasatiempos</label>
        <div class="col-md-8" formArrayName="pasatiempos">
            <input *ngFor="let pasatiempo of forma.controls['pasatiempos'].controls; let i = index" [formControlName]="i" class="form-control" type="text" placeholder="Escribe un pasatiempo">

        </div>
        <button class="btn btn-primary" (click)="agregarPasatiempos()">Agregar</button>
    </div>

    <div class="form-group row">
        <label class="col-2 col-form-label">&nbsp;</label>
        <div class="input-group col-md-8">
            <!-- <button (click)="guardarCambios()" class="btn btn-outline-primary"> -->
            <button type="submit" class="btn btn-outline-primary">
        Guardar
      </button>
        </div>
    </div>

</form>

{{ forma.valid }} <br> {{ forma.status }}