Si intentamos manipular el DOM desde un servicio de Angular (a sabiendas que no es aconsejado según las convenciones de Angular) es posible que nos salte el error:
NullInjectorError: No provider for Renderer2
Si queremos romper las «reglas» y acceder al DOM podemos hacer una truquito mientras Angular arregla el issue (https://github.com/angular/angular/issues/17824)
Lo que podemos hacer es inyectar en el constructor «RendererFactory2» y asignar en el constructor el «rendererFactory» inyectado a la propiedad «_renderer2» que anteriormente hemos inicializado.
El ejemplo entero:
import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class AccesoDomDesdeService {
private _renderer2: Renderer2
constructor(
rendererFactory: RendererFactory2,
) {
this._renderer2 = rendererFactory.createRenderer(null, null)
}
}
Y ya podríamos utilizar el «_renderer2» para acceder al DOM perfectamente.
No es lo más bonito, limpio, etc, etc… Pero, si queremos albergar una web/landing/blog o simplemente un directorio para tener algunos recursos dentro de nuestro proyecto en Angular
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
...
"projects": {
"webapp": {
...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
"assets": [
"src/favicon.ico.png",
"src/assets",
"src/landing"
]
}
}
}
}
}
}
Creamos una carpeta con el mismo nombre que hemos puesto «landing» y creamos un index.html dentro.
Y ya, compilamos y ya podemos acceder a:
http://localhost:4200/landing
Y veremos el index que hemos creado (:
El título nos puede marear un poco, no supe resumirlo.
Básicamente, si queremos validar que el campo no exista en base datos, desde un validator de Laravel pondremos algo parecido a:
(pongamos el ejemplo que tenemos un campo que se llama usuario/username en base datos que queramos que sea único)
Este sería un resumen el archivo App\Http\Requests\UpdateUserRequest.php
class UpdateUserRequest extends FormRequest
{
...
public function rules()
{
return [
...
'surnames' => 'string|max:150',
'username' => 'string|max:30|unique:users,username',
...
];
}
}
Si nos fijamos en el campo username, entre otras validaciones (que sea un string como máximo 30 caracteres) tenemos unique, junto con la tabla; users y el campo que queremos que sea único; username.
Bien, esto nos funcionaría la primera vez cuando el usuario todavía no tiene un username… pero cuando vamos a actualizar el campo vamos a tener el problema que esta validación no nos permitiría enviar nuestro propio nombre de usuario ya que detectaría que ya existe en base de datos y nos lo echaría atrás.
En este caso tenemos que utilizar un validation rule diciéndole que ignore el username que esté relacionado con nuestro usuario (en este caso, el usuario logueado «request()->user()->id «):
public function rules()
class UpdateUserRequest extends FormRequest
{
...
public function rules()
{
return [
...
'surnames' => 'string|max:150',
'username' => [ 'string', 'max:30', ValidationRule::unique( 'users' )->ignore( request()->user()->id ) ],
...
];
}
}
¡Espero que os sirva!
Saludos 👨💻
jajajaaja, mi primer intento de clickbait, pero si pero no.
En verdad os traigo una colección molona de free burger menus para poner en vuestro sitio en tan solo 2 minutos.
La web es: https://jonsuh.com/hamburgers/
En el post anterior os pasé un par de enlaces para ver qué es CSS GRID y para empezar a aprender.
En este os paso un par de enlaces a modo de chuleta para refrescar la cantidad de propiedades que tiene CSS GRID.
Aquí tenemos dos páginas de referencia para (de un plumazo) refrescar la memoria de las bondades que atesora.
Captura de pantalla de grid.malven.com
CSS GRID es una sistema de rejilla en dos dimensiones que permite crear layouts maravillosos para web.
Podéis ver algunos ejemplos en: https://gridbyexample.com/examples/
Y si nos aventuramos a aprenderlo, aquei tenemos una página bastante molona para practicar: https://cssgridgarden.com
A darle duro!!
👨💻
A veces cuando nos queremos mover a un punto de «ancla» nos puede surgir un problema en el caso que tengamos, por ejemplo, un navbar.
¿Por qué? Porque HTML no reconoce si tiene una capa que le tape cierto contenido o no. Para solucionar esto tenemos una propiedad en css llamada scroll-margin-top, y le podemos pasar los píxeles de margen que queremos respecto a la parte superior.
#elemento{
scroll-margin-top: 72px;
}
Podemos ver el ejemplo en Codepen:
See the Pen
Scroll to Anchor with margin top by Kike (@kikebeltran)
on CodePen.
Si te retorna este error en Angular es porque tendrás más de un «validator» sin que estén dentro de un array.
Por ejemplo:
this.formBuilder.group({
...
email: ['', Validators.required, Validators.email],
});
Si tienes varios «Validators» sin que estos estén contenidos en su propio array, deberíamos modificarlos a:
this.formBuilder.group({
...
email: ['', [Validators.required, Validators.email] ],
});
Y fixed 💃
Pasamos de tener los «Validators» de:
Validators.required, Validators.email
a:
[ Validators.required, Validators.email ]
Si estamos trabajando en Laravel 8 y queremos crear todos estos archivos:
Model
Factory
Migration
Seeder
Controller
Tan solo tendremos que ejecutar:
php artisan make:model ModelName -a
Nos devolverá:
Model created successfully. Factory created successfully. Created Migration: 2021_06_30_063551_create_name_table Seeder created successfully. Controller created successfully.