↓これを追加
import { FormControl,Validators } from '@angular/forms';
export class AppComponent {
}
↓ に変更
export class AppComponent {
public control = new FormControl('', [Validators.required]);
}
入力欄:<input type="text" [formControl]="control" required>
<div *ngIf="control.invalid && (control.dirty || control.touched)">
<span *ngIf="control.hasError('required')">必須です。</span>
</div>
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
imports: [
....
ReactiveFormsModule, // 追加
],
class Validators {
static min(min: number): ValidatorFn
static max(max: number): ValidatorFn
static required(control: AbstractControl): ValidationErrors | null
static requiredTrue(control: AbstractControl): ValidationErrors | null
static email(control: AbstractControl): ValidationErrors | null
static minLength(minLength: number): ValidatorFn
static maxLength(maxLength: number): ValidatorFn
static pattern(pattern: string | RegExp): ValidatorFn
static nullValidator(control: AbstractControl): ValidationErrors | null
static compose(validators: ValidatorFn[]): ValidatorFn | null
static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null
}
public control = new FormControl('', [Validators.required]);
↓ このように書き換える
public control = new FormControl('', {
validators: [Validators.required] ,
updateOn: 'blur'
});