Seleccionando un icono para la pregunta

Clase 25 de 75 • Curso de MEAN 2017

Fernando Ontiveros

student•

El error que aparece al final se consigue solucionar poniendo <mat-radio-group> como padre de <mat-radio-button:

<mat-radio-group [ngModel] name="icon">
  <mat-radio-button value="SU_VALOR">
    <i mat-list-icon class="SU_CLASE"></i>
  </mat-radio-button>
</mat-radio-group>

Crédito de @jamarin_

Cesar Colina

student•

Buen aporte, realmente lo unico que hay que hacer es pasar [ngModel] a <mat-radio-group >

Carlos Andres PINZON SOLANO

student•

Hay que pasar [ngModel] y el name=“icon”.

Queda algo como:

<mat-grid-list cols="3" rowHeight="3:2">
    <mat-grid-tile>
      <mat-radio-group [ngModel] name="icon">
        <mat-radio-button  value="none">
          <i mat-list-icon class="material-icons colored">help</i>
          <small>Sin ícono</small>
        </mat-radio-button>
      </mat-radio-group>
    </mat-grid-tile>
    <mat-grid-tile *ngFor="let icon of icons">
      <mat-radio-group [ngModel] name="icon">
        <mat-radio-button  value="devicon-{{ icon.name }}-{{ getIconVersion(icon) }}">
          <i mat-list-icon class="devicon-{{ icon.name }}-{{ getIconVersion(icon) }} colored" ></i>
        </mat-radio-button>
      </mat-radio-group>
    </mat-grid-tile>
  </mat-grid-list>

Pablo Verdugo Garrido

student•

Usar radio buttons es un poco feo :S

Yo he utilizado los iconos como botones y queda mejor ;D

El html queda así:

<form (ngSubmit)="onSubmit(f)" #f="ngForm">
  <mat-input-container>
    <input matInput placeholder="Título" name="title" ngModel>
  </mat-input-container>
  <mat-input-container>
    <input matInput placeholder="Descripción" name="description" ngModel>
  </mat-input-container>
  <mat-grid-list cols="3" rowHeight="3:2">
    <mat-grid-tile>
      <button mat-button type="button" color="primary" (click)="onClick('none')">
        <i mat-icon class="material-icons">help</i>
      </button>
    </mat-grid-tile>
    <mat-grid-tile *ngFor="let icon of icons">
      <ng-container *ngIf="icon.name !== 'illustrator'">
        <button mat-button type="button" color="primary" (click)="onClick(icon.name)">
          <i mat-icon aria-hidden="true" class="devicon-{{ icon.name }}-{{ geticonVersion(icon) }} colored"></i>
        </button>
      </ng-container>
      <ng-container *ngIf="icon.name === 'illustrator'">
        <button mat-button type="button" color="primary" (click)="onClick('illustrator')">
          <i mat-icon class="devicon-illustrator-plain colored"></i>
      </button>
      </ng-container>
    </mat-grid-tile>
  </mat-grid-list>
  <button type="submit" mat-raised-button color="accent">Enviar</button>
</form>

Y así el export class:

export class QuestionFormComponent {
  icons: Object[] = icons;
  selectedIcon: 'none';

  geticonVersion(icon: any) {
    let version;
    if (icon.versions.font.includes('plain-wordmark')) {
      version = 'plain-wordmark';
    } else {
      version = icon.versions.font[0];
    }
    return version;
  }

  onClick(icon) {
    this.selectedIcon = icon;
  }

  onSubmit(form: NgForm) {
    const q = new Question(
      form.value.title,
      form.value.description,
      new Date(),
      this.selectedIcon
    );
    console.log(q);
  }
}

Luis Enrique Muñoz Ibarra

student•

Porque tus iconos tienen color? :c

Pablo Verdugo Garrido

student•

les puse la clase colored 😃

CarlosHP

student•

Les dejo el código correcto del archivo question-form.component.html

<form (ngSubmit)="onSubmit(f)" #f="ngForm">
	<mat-form-field class="example-full-width">
		<input matInput placeholder="Título" name="title" ngModel>
	</mat-form-field>
	<mat-form-field class="example-full-width">
		<input matInput placeholder="Descripción" name="description" ngModel>
	</mat-form-field>
	<mat-grid-list cols="3" rowHeight="3:2">
		<mat-grid-tile >
			<mat-radio-group [ngModel] name="icon">
				<mat-radio-button value="none">
					<i mat-list-icon  class="material-icons">help</i>
					<small>Sin Icono</small>
				</mat-radio-button>
			</mat-radio-group>
		</mat-grid-tile>

		<mat-grid-tile *ngFor="let icon of icons" >
			<mat-radio-group [ngModel] name="icon">
				<mat-radio-button  value="devicon-{{ icon.name }}-{{ getIconVersion(icon) }}">
					<i mat-list-icon *ngIf="icon.name !== 'illustrator'" class="devicon-{{ icon.name }}-{{ getIconVersion(icon) }}"></i>
				</mat-radio-button>
			</mat-radio-group>
		</mat-grid-tile>
	</mat-grid-list>
	<button type="submit" mat-raised-button color="warn">Enviar</button>
</form>

Por cualquier otra duda pueden revisar el repositorio de github:
repositorio Platzi.overflow

Jorge Hernandez Rozo

student•

me funciona perfecto gracias 😄

Alexander Marenco

student•

En el video no muestras el resultado del console log, y al final salen errores O.O

Alexander Marenco

student•

Al darle submit en el atributo icon me devuelve null 😕

Enzo Aliatis

student•

En el github esta ya corregido, es de copiar y pegar el question-form.component.html

Eduardo Ignacio Denis

student•

Si estan realizando el formulario con Reactive Forms deben realizar el binding de la siguiente forma:

<mat-radio-group formControlName="icon" name="icon">
                <mat-radio-button value="devicon-{{ icon.name }}-{{ getIconVersion(icon) }}">
                    <i mat-list-icon class="devicon-{{ icon.name }}-{{ getIconVersion(icon) }} colored"></i>
                </mat-radio-button>
</mat-radio-group>

y luego en el .ts agregar al FormGroup lo siguiente:

icon: new FormControl(null, Validators.required)

Walter Lensinas

student•

Buenos días, agrego el código de la clase:

Gracias el aporte de @jamarin_ y el comment destacado de @ferontv_

Edgar Muñoz

student•

El controlador no está recibiendo el valor del ícono… no entiendo por qué, pero debo decir que los controles de material angular tienen unos tags diferentes a los que se están mostrando en el curso, entonces no sé si es que los estoy usando mal.
Hago un console.log del value del parámetro form en el método onSubmit, y si contiene el atributo icon, pero llega null…
Qué otra cosa debo revisar???

Kath Sánchez

teacher•

¿Nos compartes tu código para ayudarte a revisar?

Edgar Muñoz

student•

En el controlador:

  onSubmit(form: NgForm) {
    console.log(form.value);
    const q = new Question(
      form.value.title,
      form.value.description,
      new Date(),
      form.value.icon
    );
    console.log(q);
  }

  getIconVersion(icon: any) {
    let version;
    if (icon.versions.font.includes('plain-wordmark')) {
      version = 'plain-wordmark';
    } else {
      version = icon.versions.font[0];
    }
    return version;
  }```

En el template:

<form (ngSubmit)=“onSubmit(f)” #f=“ngForm”> <mat-form-field> <input matInput placeholder="Título" name="title" id="title" ngModel> </mat-form-field> <mat-form-field> <input matInput placeholder="Descripción" name="description" id="description" ngModel> </mat-form-field> <mat-grid-list cols=“3” rowHeight=“3:2”> <mat-grid-tile> <mat-radio-button [ngModel] name=“icon” id=“icon” value=“none” ngDefaultControl> <i mat-list-icon class=“material-icons”>help</i> <small>Sin ícono</small> </mat-radio-button> </mat-grid-tile> <mat-grid-tile \*ngFor=“let icon of icons”> <mat-radio-button [ngModel] name=“icon” id=“icon” value=“devicon-{{}}-{{getIconVersion(icon)}}” ngDefaultControl> <i mat-list-icon class=“devicon-{{}}-{{getIconVersion(icon)}}”></i> </mat-radio-button> </mat-grid-tile> </mat-grid-list> <button type=“submit” mat-raised-button color=“accent”>Enviar</button> </form>```

Usuario anónimo

user•

Adrian Ducuara Benitez

student•

Si enfrenta algún error en los radios-buttons tengan encuenta la siguiente estructura:

<mat-radio-group  name="icon" ngModel>
                <mat-radio-button value="none">
                    <i mat-list-icon class="material-icons">help</i>
                    <small>Sin icon</small>
                </mat-radio-button>
            </mat-radio-group>

mat-radio-group es el padre del elemento mat-radio-button por ende este elemento contiene los atributos ngModel y el name.
mat-radio-button es el elemento hijo por lo que llevará únicamente su valor value=" "

Andres Alvarez

student•

porque en este caso uso el ngMode con [] y en los anteriores no los uso (ya vi el curso de angular sino que siempre me confundo con el ngModel)

José Valentin Salina Peña

student•

Se deben indicar los combo box de la siguiente manera para evitar errores:

<mat-grid-tile *ngFor="let icon of icons">
 <mat-radio-group ngModel name="icon">
   <mat-radio-button value="devicon-{{icon.name}}-{{getIconVersion(icon)}}">
      <i mat-list-icon class="devicon-{{icon.name}}-{{getIconVersion(icon)}}"></i>
   </mat-radio-button>
  </mat-radio-group>
</mat-grid-tile>

Nestor Camilo Prieto Reyes

student•

Deberían arreglar el vídeo o poner un comentario en la descripción.

Jorge Hernandez Rozo

student•

si tiene problemas el video 😭 , pero el comentario de @carlosHP es el mas adecuado para solucionar el problema

Anthony Gonzalez

student•

Cuando llegó al minuto 2:10 el video deja de cargar, ya he actualizado la pagina varias veces y es en ese minuto que se traba

Diego Forero

Team Platzi•

En estos momentos estamos teniendo problemas con el proveedor de video, ya estamos trabajando para solucionarlo lo mas pronto posible, por el momento puede probar con el server B

Alejandro Mora

student•

Alguien me puede ayudar en la versión actual no funciona.

//----------------------------------------------question-form.component.html-------------------------------------//

    <mat-grid-tile>
      <mat-radio-group [ngModel] name="icon">
        <mat-radio-button value='none'>
          <i mat-list-icon class="material-icons">help</i>
          <small>Sin ícono</small>
        </mat-radio-button>
      </mat-radio-group>
    </mat-grid-tile>
    <mat-grid-tile *ngFor="let icon of icons">
      <mat-radio-group [ngModel] name="icon">
        <mat-radio-button value="devicon-{{ icon.name }}-{{ getIconVersion(icon) }}">
          <i mat-list-icon class="devicon-{{ icon.name }}-{{ getIconVersion(icon) }}"></i>
        </mat-radio-button>
        </mat-radio-group>
    </mat-grid-tile>

</mat-grid-list> <button type=“submit” mat-raised-button color=“accent”>Enviar</button> </form>

//-----------------------------------------question-list.component.ts-------------------------------------------------//

import { Component } from ‘@angular/core’;
import { NgForm } from ‘@angular/forms’;
import { Question } from ‘./question.model’;
import icons from ‘./icons’;

@Component({
selector: ‘app-question-form’,
templateUrl: ‘./question-form.component.html’,
styles: [i { font-size: 48px; } small { display: block; }]
})

export class QuestionFormComponent {
icons: Object[] = icons;
getIconVersion(icon: any) {
let version;
if (icon.versions.font.includes(‘plain-wordmark’)) {
version = ‘plain-wordmark’;
} else {
version = icon.versions.font[0];
}
return version;
}
onSubmit(form: NgForm) {
const q = new Question(
form.value.title,
form.value.description,
new Date(),
form.value.icon
);
console.log(q);
}
}

//-----------------------------------------ERROR------------------------------------//
core.js:1448 ERROR Error: Uncaught (in promise): Error: No value accessor for form control with name: 'icon’
Error: No value accessor for form control with name: 'icon’
at _throwError (forms.js:2432)
at setUpControl (forms.js:2302)
at eval (forms.js:5649)
at ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:4749)
at ZoneDelegate.invoke (zone.js:387)
at Zone.run (zone.js:138)
at eval (zone.js:858)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4740)
at _throwError (forms.js:2432)
at setUpControl (forms.js:2302)
at eval (forms.js:5649)
at ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:4749)
at ZoneDelegate.invoke (zone.js:387)
at Zone.run (zone.js:138)
at eval (zone.js:858)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4740)
at resolvePromise (zone.js:809)
at eval (zone.js:861)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4740)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at <anonymous>

Siempre sale null para icon

<mat-grid-list cols="3" rowHeight="3:2">
    <mat-grid-tile>
      <mat-radio-group [ngModel] name="icon">
        <mat-radio-button  value="none">
          <i mat-list-icon class="material-icons colored">help</i>
          <small>Sin ícono</small>
        </mat-radio-button>
      </mat-radio-group>
    </mat-grid-tile>
    <mat-grid-tile *ngFor="let icon of icons">
      <mat-radio-group [ngModel] name="icon">
        <mat-radio-button  value="devicon-{{ icon.name }}-{{ getIconVersion(icon) }}">
          <i mat-list-icon class="devicon-{{ icon.name }}-{{ getIconVersion(icon) }} colored" ></i>
        </mat-radio-button>
      </mat-radio-group>
    </mat-grid-tile>
  </mat-grid-list>

<form (ngSubmit)="onSubmit(f)" #f="ngForm">
  <mat-input-container>
    <input matInput placeholder="Título" name="title" ngModel>
  </mat-input-container>
  <mat-input-container>
    <input matInput placeholder="Descripción" name="description" ngModel>
  </mat-input-container>
  <mat-grid-list cols="3" rowHeight="3:2">
    <mat-grid-tile>
      <button mat-button type="button" color="primary" (click)="onClick('none')">
        <i mat-icon class="material-icons">help</i>
      </button>
    </mat-grid-tile>
    <mat-grid-tile *ngFor="let icon of icons">
      <ng-container *ngIf="icon.name !== 'illustrator'">
        <button mat-button type="button" color="primary" (click)="onClick(icon.name)">
          <i mat-icon aria-hidden="true" class="devicon-{{ icon.name }}-{{ geticonVersion(icon) }} colored"></i>
        </button>
      </ng-container>
      <ng-container *ngIf="icon.name === 'illustrator'">
        <button mat-button type="button" color="primary" (click)="onClick('illustrator')">
          <i mat-icon class="devicon-illustrator-plain colored"></i>
      </button>
      </ng-container>
    </mat-grid-tile>
  </mat-grid-list>
  <button type="submit" mat-raised-button color="accent">Enviar</button>
</form>

export class QuestionFormComponent {
  icons: Object[] = icons;
  selectedIcon: 'none';

  geticonVersion(icon: any) {
    let version;
    if (icon.versions.font.includes('plain-wordmark')) {
      version = 'plain-wordmark';
    } else {
      version = icon.versions.font[0];
    }
    return version;
  }

  onClick(icon) {
    this.selectedIcon = icon;
  }

  onSubmit(form: NgForm) {
    const q = new Question(
      form.value.title,
      form.value.description,
      new Date(),
      this.selectedIcon
    );
    console.log(q);
  }
}

<form (ngSubmit)="onSubmit(f)" #f="ngForm">
	<mat-form-field class="example-full-width">
		<input matInput placeholder="Título" name="title" ngModel>
	</mat-form-field>
	<mat-form-field class="example-full-width">
		<input matInput placeholder="Descripción" name="description" ngModel>
	</mat-form-field>
	<mat-grid-list cols="3" rowHeight="3:2">
		<mat-grid-tile >
			<mat-radio-group [ngModel] name="icon">
				<mat-radio-button value="none">
					<i mat-list-icon  class="material-icons">help</i>
					<small>Sin Icono</small>
				</mat-radio-button>
			</mat-radio-group>
		</mat-grid-tile>

		<mat-grid-tile *ngFor="let icon of icons" >
			<mat-radio-group [ngModel] name="icon">
				<mat-radio-button  value="devicon-{{ icon.name }}-{{ getIconVersion(icon) }}">
					<i mat-list-icon *ngIf="icon.name !== 'illustrator'" class="devicon-{{ icon.name }}-{{ getIconVersion(icon) }}"></i>
				</mat-radio-button>
			</mat-radio-group>
		</mat-grid-tile>
	</mat-grid-list>
	<button type="submit" mat-raised-button color="warn">Enviar</button>
</form>

<mat-radio-group formControlName="icon" name="icon">
                <mat-radio-button value="devicon-{{ icon.name }}-{{ getIconVersion(icon) }}">
                    <i mat-list-icon class="devicon-{{ icon.name }}-{{ getIconVersion(icon) }} colored"></i>
                </mat-radio-button>
</mat-radio-group>

  onSubmit(form: NgForm) {
    console.log(form.value);
    const q = new Question(
      form.value.title,
      form.value.description,
      new Date(),
      form.value.icon
    );
    console.log(q);
  }

  getIconVersion(icon: any) {
    let version;
    if (icon.versions.font.includes('plain-wordmark')) {
      version = 'plain-wordmark';
    } else {
      version = icon.versions.font[0];
    }
    return version;
  }```

En el template:

<mat-radio-group  name="icon" ngModel>
                <mat-radio-button value="none">
                    <i mat-list-icon class="material-icons">help</i>
                    <small>Sin icon</small>
                </mat-radio-button>
            </mat-radio-group>

<mat-grid-tile *ngFor="let icon of icons">
 <mat-radio-group ngModel name="icon">
   <mat-radio-button value="devicon-{{icon.name}}-{{getIconVersion(icon)}}">
      <i mat-list-icon class="devicon-{{icon.name}}-{{getIconVersion(icon)}}"></i>
   </mat-radio-button>
  </mat-radio-group>
</mat-grid-tile>

    <mat-grid-tile>
      <mat-radio-group [ngModel] name="icon">
        <mat-radio-button value='none'>
          <i mat-list-icon class="material-icons">help</i>
          <small>Sin ícono</small>
        </mat-radio-button>
      </mat-radio-group>
    </mat-grid-tile>
    <mat-grid-tile *ngFor="let icon of icons">
      <mat-radio-group [ngModel] name="icon">
        <mat-radio-button value="devicon-{{ icon.name }}-{{ getIconVersion(icon) }}">
          <i mat-list-icon class="devicon-{{ icon.name }}-{{ getIconVersion(icon) }}"></i>
        </mat-radio-button>
        </mat-radio-group>
    </mat-grid-tile>

Seleccionando un icono para la pregunta

Introducción al Curso de MEAN

Bienvenidos al Curso de MEAN

¿Qué es MEAN?

El Frontend de PlatziOverflow

Introducción a Angular y TypeScript

Instalación y configuración del entorno

Trabajando con Angular Material

Construcción del header de la aplicación

Detalles de preguntas para el proyecto

Construcción de pantalla de detalle de una pregunta

Estilo en la pantalla de detalle de una pregunta

Incorporando angular2-moment al proyecto

Agregando el listado de respuestas a la pantalla de detalle

Agregando un formulario para respuestas

Dando estilo al formulario de preguntas

Corrigiendo estilos en el formulario y toques finales

Cómo mostrar las respuestas en el listado

Empezando la pantalla de signin

Creando el formulario de signin

Dando estilo al formulario de signin

Creando la pantalla para el listado de preguntas

Creando el componente para los listados de preguntas

Crear la pantalla para cargar una nueva pregunta

Crear formulario de carga de nueva pregunta

Agregando iconos al formulario de preguntas

Agregando un icono genérico al formulario de preguntas

Seleccionando un icono para la pregunta

Conectando nuestras pantallas con el router de Angular

Conectando la pantalla de registro con la de login

Conectando el listado de preguntas con la pantalla del detalle

Conectando el listado de preguntas con el formulario de creación

El Backend de PlatziOverflow

Introducción a Node.js y Express

Express

Instalación y configuración del entorno de desarrollo de Backend con Babel

Instalación y primeros pasos con Express

Creando un endpoint en la API para servir preguntas al cliente

Creando el servicio de preguntas

Completando el servicio de preguntas

Conectando el Frontend de preguntas con nuestro Backend

Agregando un spinner para la carga de preguntas

Obteniendo el detalle de una pregunta desde el Backend

DESAFIO: Contruye el spinner del detalle de la pregunta

Agregando una ruta para crear una pregunta en el Backend

Agregando el método para crear preguntas en el QuestionService

Enviando una pregunta hacia el Backend

Agregando una ruta para crear una respuesta en el Backend

Agregando el método para crear respuestas en el QuestionService

Enviando una respuesta hacia el Backend

Creando la ruta de signin en el Backend

Creando un JSON web token para el usuario autenticado

Escribiendo nuestro servicio de autenticación

Conectando el signin con el Backend

Agregando el logout de usuarios a PlatziOverflow

Creando la ruta de signup en el backend

Conectando el signup de usuarios con el Backend

Qué son y Cómo funcionan los Middlewares

Organizando los middlewares del Backend

Autorizando usuarios para que puedan crear preguntas

Manejar el error del signin

La Base de Datos de PlatziOverflow

Creando el modelo de respuesta

Creando el modelo de usuario

Creando el modelo de pregunta

Estableciendo la conexión con la base de datos

Obteniendo todas las preguntas de la base de datos

Obteniendo una pregunta de la base de datos

Conectando el signup con la base de datos

Encriptando la contraseña del usuario

Conectando el signin con la base de datos

Guardando una pregunta en la base de datos

Guardando una respuesta en la base de datos

Ordenando las preguntas en la home

Despliegue a producción

¿Cómo vamos a hacer el deploy?

Configurando nuestra app para el entorno productivo

Creando el build para producción de nuestro Frontend

Creando el build para producción de nuestro Backend

Cómo enfrentar un proyecto MEAN de aquí en más