在Angular 6中使用Modal的两种方式的数据绑定不起作用

时间:2019-02-04 03:33:03

标签: angular data-binding bootstrap-modal two-way-binding

我是Angular的新手,并尝试使用[(ngModel)]进行双向数据绑定。但是我收到消息“ [Angular]标识符'usuario'未定义。'NgModel'不包含此类成员”,并且数据未绑定。 使用表格中的和编辑按钮打开模态,我想填写模态的字段。

我导入了FormsModule和ReactiveFormsModule。所以我不知道怎么了。

user.component.html

<p *ngIf="!usuarios"><em>Cargando...</em></p>
<div class="container-main">
    <table class="table table-striped animated fadeIn fast">
        <thead>
            <tr>
                <th>Usuario</th>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Teléfono</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let usuario of usuarios">
                <td>{{usuario.usuario}}</td>
                <td>{{usuario.nombre}}</td>
                <td>{{usuario.apellido}}</td>
                <td>{{usuario.telefono}}</td>
                <td>{{usuario.email}}</td>
                <td>
                    <button type="button" class="btn btn-info" (click)="editUser(UserModal, usuario)">
                        <span class="glyphicon glyphicon-cog" aria-hidden="true"  ></span>
                      </button>
                    <button type="button" class="btn btn-danger" (click)="deleteUser(usuario.usuario_id)">
                <span class="glyphicon glyphicon-trash" aria-hidden="true" ></span>
              </button>
                </td>
            </tr>
        </tbody>
    </table>
    <button type="button" class="btn btn-success navbar-btn pull-right" (click)="newUser(UserModal)"><span class="glyphicon glyphicon-plus"  aria-hidden="true"></span> Nuevo Usuario</button>
</div>


<ng-template #UserModal>
    <div class="modal-header">
        <h4 class="modal-title pull-left">
            Datos de Usuario
        </h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalUser.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="modal-body">

        <form #forma="ngForm" ngNativeValidate (ngSubmit)="saveUser(forma)" style="padding-top: 1em; padding-bottom: 1em">
            <div class="form-group">
                <label>Usuario</label>
                <!-- <input #User type="text" required [value]="usuario.usuario ? usuario.usuario : null" class="form-control" aria-describedby="basic-addon3" placeholder="usuario"> -->
                <input class="form-control" required placeholder="Ingrese un usuario" type="text" name="usuario" [(ngModel)]="usuario.usuario" #usuario="ngModel">
                <!-- <div *ngIf="usuario.errors?.required">
                    Requerido
                </div> -->
                <!-- <div [hidden]="nombre.valid || nombre.pristine" class="alert alert-danger">
                    Requerido
                </div> -->
            </div>


            <div class="form-group">
                <label>Nombre</label>
                <!-- <input #UserName type="text" required [value]="usuario.nombre ? usuario.nombre : null" class="form-control" aria-describedby="basic-addon3" placeholder="Ingrese un nombre"> -->
                <input class="form-control" required placeholder="Ingrese un nombre" type="text" name="nombre" [(ngModel)]="usuario.nombre" #nombre="ngModel">
                <!-- <div *ngIf="nombre.errors?.required">
                    Requerido
                </div> -->
            </div>
            <div class="form-group">
                <label>Apellido</label>
                <!-- <input #UserlastName type="text" required [value]="usuario.apellido ? usuario.apellido : null" class="form-control" aria-describedby="basic-addon3" placeholder="Ingrese un apellido"> -->
                <input class="form-control" required placeholder="Ingrese un apellido" type="text" name="apellido" [(ngModel)]="usuario.apellido" #apellido="ngModel">
                <!-- <div *ngIf="apellido.errors?.required">
                    Requerido
                </div> -->
            </div>
            <div class="form-group">
                <label>Documento</label>
                <!-- <input #UserTelephone type="number" required [value]="usuario.telefono ? usuario.telefono : null" class="form-control" aria-describedby="basic-addon3" placeholder="Ingrese un teléfono (solo números)"> -->
                <input class="form-control" required placeholder="Ingrese un documento" type="number" name="documento" [(ngModel)]="usuario.documento" #documento="ngModel">
                <!-- <div *ngIf="telefono.errors?.required">
                    Requerido
                </div> -->
            </div>
            <div class="form-group">
                <label>Teléfono</label>
                <!-- <input #UserTelephone type="number" required [value]="usuario.telefono ? usuario.telefono : null" class="form-control" aria-describedby="basic-addon3" placeholder="Ingrese un teléfono (solo números)"> -->
                <input class="form-control" required placeholder="Ingrese un teléfono" type="text" name="telefono" [(ngModel)]="usuario.telefono" #telefono="ngModel">
                <!-- <div *ngIf="telefono.errors?.required">
                    Requerido
                </div> -->
            </div>
            <div class="form-group">
                <label>Email</label>
                <!-- <input #UserEmail type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" [value]="usuario.email ? usuario.email : null" class="form-control" aria-describedby="basic-addon3" placeholder="Ingrese un correo"> -->
                <input class="form-control" required placeholder="Ingrese un correo electrónico" type="email" name="email" [(ngModel)]="usuario.email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" #email="ngModel">
                <!-- <div *ngIf="email.errors?.required">
                    Requerido
                </div> -->
                <div *ngIf="email.errors?.pattern">
                    Formato de email incorrecto
                </div>
            </div>
            <div class="form-group">
                <label>Password</label>
                <!-- <input #UserTelephone type="number" required [value]="usuario.telefono ? usuario.telefono : null" class="form-control" aria-describedby="basic-addon3" placeholder="Ingrese un teléfono (solo números)"> -->
                <input class="form-control" id="password" required placeholder="Ingrese un password" type="password" name="password" [(ngModel)]="usuario.password" #password="ngModel">
                <!-- <div *ngIf="telefono.errors?.required">
                    Requerido
                </div> -->
            </div>
            <!-- <div class="form-group">
                <label>Password</label>
                <input #UserTelephone type="number" required [value]="usuario.telefono ? usuario.telefono : null" class="form-control" aria-describedby="basic-addon3" placeholder="Ingrese un teléfono (solo números)">
                <input class="form-control" id="confirm_password" required placeholder="Ingrese el mismo password" type="password">

            </div> -->

            <button type="submit" [disabled]="!forma.form.valid" class="btn btn-primary mr-auto">
            <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> Guardar
            </button>
        </form>

        <div class="modal-footer">
            Usuario
        </div>
    </div>
</ng-template>

user.component.ts

import {Component, OnInit, Inject, TemplateRef, ElementRef } from "@angular/core";
import {HttpClient, HttpHeaders, HttpRequest, HttpEventType, HttpResponse} from "@angular/common/http";
import { ActivatedRoute } from "@angular/router";
import { Http, Headers, RequestOptions } from "@angular/http";
import { BsModalService } from "ngx-bootstrap/modal";
import { BsModalRef } from "ngx-bootstrap/modal/bs-modal-ref.service";
import { NgForm } from "@angular/forms";


@Component({
  selector: "app-users",
  templateUrl: "./users.component.html"
})
export class UsersComponent implements OnInit {
  // **** Ventanas Modales ****
  modalRef: BsModalRef;
  modalRefAlert: BsModalRef;
  modalUser: BsModalRef;

  public baseUrl: string;
  public http: HttpClient;
  public headers: Headers;
  public options: RequestOptions;
  public usuarios: User[];
  public usuario: User;
  public message: string;
  public title: string;
  public nuevo:boolean = true; 


  constructor(
    private route: ActivatedRoute, http: HttpClient, @Inject("BASE_URL") baseUrl: string, private modalService: BsModalService) {
    this.baseUrl = baseUrl;
    this.http = http;
    let headers = new Headers({
      "Content-Type": "application/x-www-form-urlencoded"
    });
    let options = new RequestOptions({ headers: headers });
  }

  ngOnInit() {
    this.loadUsers();
  }

  loadUsers() {
    //Aca se llama a la api para obtener todos los usuarios...
    this.http
      .get<User[]>(this.baseUrl + "api/Users/GetAllUsers")
      .subscribe(result => {
        this.usuarios = result;
        console.log(this.usuarios);
      });
  }

  // Abre una ventana modal que muestra el error personalizado
  openModalAlert(template: TemplateRef<any>, ttl: string, msg: string) {
    this.message = msg;
    this.title = ttl == "" ? "Alerta" : ttl;
    this.modalRefAlert = this.modalService.show(template, { class: "second" });
  }

  // Elimina un usuario
  deleteUser(_idns_user: number) {
    if (confirm("Está seguro que quiere eliminar el usuario?")) {
      //Aca se llama a la api para obtener todos los usuarios...
      this.http
        .get<boolean>(
          this.baseUrl + "api/Users/DeleteUser?iduser=" + _idns_user
        )
        .subscribe(result => {
          console.log(result);
          alert("Se ha eliminado correctamente el usuario" + _idns_user);
        });
    } else {
      // Do nothing!
    }
  }

  // Abre la ventana modal que muestra las propiedades de la carpeta
  editUser(template: TemplateRef<any>, usuario: User) {
    //marca de edicion de usuario
    this.nuevo = false;

    this.usuario = usuario;
    template.elementRef
    console.log(this.usuario );
    this.modalUser = this.modalService.show(template);
  }

  // Abre la ventana modal que muestra las propiedades de la carpeta
  newUser(template: TemplateRef<any>) {
    this.nuevo = true;
    this.usuario = null;
    this.modalUser = this.modalService.show(template);
  }

  saveUser(forma: NgForm) {
    // this.usuario.usuario = user;
    // this.usuario.nombre = username;
    // this.usuario.apellido = lastname;
    // this.usuario.telefono = telephone.toString();
    // this.usuario.email = email;
    console.log("Formulario posteado");
    console.log("ngForm" , forma);
    console.log("valor forma", forma.value);

    console.log("Usuario", this.usuario);
    this.usuario = forma.value;

    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    let url;
    console.log(this.nuevo)
    if (this.nuevo){
      url = this.baseUrl +  'api/Users/InsertUser';
    }else{
     url = this.baseUrl +  'api/Users/UpdateUser';
    }
    console.log(this.usuario);

    this.http.post<User>(url, this.usuario, httpOptions).subscribe
    (
      res => {
        console.log(res); 

        //this.openModalAlert(this.ventanaModal,"Exito!","Se creo su nuevo atributo con exito!"); 
      }
      , 
      error => { 
        //this.openModalAlert(this.ventanaModal,"Error!",JSON.stringify(error)); 
        console.error(error) 
      }
    );



  }


}

 class User {
  usuario_id: number;
  usuario: string;
  password: string;
  nombre: string;
  apellido: string;
  telefono: string;
  email: string;
  documento: number;
  alta_fecha: Date;
  // familias : family[];
}

2 个答案:

答案 0 :(得分:0)

这是因为您的usuario还不存在。 试试这个:

<div class="modal-body" *ngIf="usuario">

如果usuario为:null或undefined,这将确保在该元素下不生成任何内容

答案 1 :(得分:0)

天哪,错误在表单组中,输入用户是:

句子[value] =“ usuario.usuario”产生的冲突没有错误。