Cómo usar inputs de texto y la importancia del type

ahí pues… sigamos con el curso que se ve bueno…

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-basic-form',
  templateUrl: './basic-form.component.html',
  styleUrls: ['./basic-form.component.scss']
})
export class BasicFormComponent implements OnInit {

  nameField = new FormControl('');
  emailField = new FormControl('');
  phoneField = new FormControl('');
  colorField = new FormControl('#000000');
  dateField = new FormControl('');
  monthField = new FormControl('');
  ageField = new FormControl(12);
  passwordField = new FormControl('');
  priceField = new FormControl('50');
  weekField = new FormControl('');
  timefield = new FormControl('');
  searchField = new FormControl('');
  descriptionField = new FormControl('');

  constructor() { }

  ngOnInit(): void {
    this.nameField.valueChanges
    .subscribe(value => {
      console.log(value);
    });
  }

  getNameValue() {
    console.log(this.nameField.value);
  }

}

<p>
    Name: {{ nameField.value }}
    <input type="text" [formControl]="nameField"/>

    <button (click)="getNameValue()">Get Value</button>
   
    <!-- <code>
        <pre>
            {{ nameField | json }}
        </pre>
    </code> -->
</p>

<p>
    Email: {{ emailField.value }}
    <input type="email" [formControl]="emailField"/>
</p>

<p>
    Phone: {{ phoneField.value }}
    <input type="tel" [formControl]="phoneField"/>
</p>

<p>
    Color: {{ colorField.value }}
    <input type="color" [formControl]="colorField"/>
</p>

<p>
    Date: {{ dateField.value }}
    <input type="date" [formControl]="dateField"/>
</p>

<p>
    Month: {{ monthField.value }}
    <input type="month" [formControl]="monthField"/>
</p>

<p>
    Age: {{ ageField.value }}
    <input type="number" [formControl]="ageField"/>
</p>

<p>
    Password: {{ passwordField.value }}
    <input type="password" [formControl]="passwordField"/>
</p>

<p>
    Range Price: {{ priceField.value }}
    <input type="range" [formControl]="priceField" min="0" max="100"/>
</p>

<p>
    Wekend: {{ weekField.value }}
    <input type="week" [formControl]="weekField"/>
</p>

<p>
    Date and time: {{ timefield.value }}
    <input type="datetime-local" [formControl]="timefield"/>
</p>

<p>
    
    Search: {{ searchField.value }}
    <input type="search" [formControl]="searchField"/>
</p>

<p>
    
    Description: {{ descriptionField.value }}
    <textarea type="text" [formControl]="descriptionField">
    </textarea>
</p>

Listo ahi agregue unos cuantos controles.

Encontre bastantes input interesantes

Este curso no esta a la altura de los últimos que grabo Nicolas de Angular, seria bueno una actualización.

Input tipo = ‘date’

Acá pueden encontrar más inputs input

https://github.com/jasorglez/angularFormswithPlatzi, este es el codigo con la version de angfular 15

Excelente! Los types son muy importantes y algo que pasamos por alto siempre al iniciar

Esta super interesante