В Angular директива ngModel используется для двусторонней привязки данных между входными элементами и свойствами компонента. Установка значения по умолчанию для ввода ngModel является общим требованием во многих приложениях. В этой статье мы рассмотрим семь различных способов достижения этой цели, а также приведем примеры кода.

Метод 1: инициализация свойства в компоненте
Один простой способ установить значение по умолчанию для входных данных ngModel — инициализировать соответствующее свойство в классе компонента. Вот пример:

import { Component } from '@angular/core';
@Component({
  selector: 'app-example',
  template: `
    <input [(ngModel)]="name" placeholder="Enter your name" />
  `
})
export class ExampleComponent {
  name = 'John Doe';
}

Метод 2: использование свойства по умолчанию ngModel
Директива ngModel предоставляет свойство по умолчанию, которое можно использовать для установки значения по умолчанию для ввода. Вот пример:

<input [(ngModel)]="name" [ngModelOptions]="{standalone: true}" [ngModelOptions]="{default: 'John Doe'}" placeholder="Enter your name" />

Метод 3: использование события ngModelChange
Вы также можете использовать событие ngModelChange, чтобы установить значение по умолчанию при изменении входных данных. Вот пример:

<input [(ngModel)]="name" (ngModelChange)="name = $event || 'John Doe'" placeholder="Enter your name" />

Метод 4: использование ngModel с ngIf
Комбинируя ngModel с ngIf, вы можете условно установить значение по умолчанию на основе определенных критериев. Вот пример:

<input *ngIf="showInput" [(ngModel)]="name" [ngModel]="showInput ? 'John Doe' : null" placeholder="Enter your name" />

Метод 5: использование класса FormControl
Если вы используете реактивные формы, вы можете использовать класс FormControl, чтобы установить значение по умолчанию. Вот пример:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
  selector: 'app-example',
  template: `
    <input [formControl]="nameControl" placeholder="Enter your name" />
  `
})
export class ExampleComponent {
  nameControl = new FormControl('John Doe');
}

Метод 6: использование DefaultValueAccessor
DefaultValueAccessor позволяет вам установить значение по умолчанию для входных данных, предоставив свойство defaultValue. Вот пример:

<input [(ngModel)]="name" [ngModelOptions]="{defaultValue: 'John Doe'}" placeholder="Enter your name" />

Метод 7: использование сеттера в компоненте.
Другой подход заключается в том, чтобы определить сеттер для входных данных ngModel и установить внутри него значение по умолчанию. Вот пример:

import { Component } from '@angular/core';
@Component({
  selector: 'app-example',
  template: `
    <input [ngModel]="name" (ngModelChange)="name = $event" placeholder="Enter your name" />
  `
})
export class ExampleComponent {
  private _name = 'John Doe';
  set name(value: string) {
    this._name = value || 'John Doe';
  }
  get name(): string {
    return this._name;
  }
}

В этой статье мы рассмотрели семь различных методов установки значений по умолчанию для входных данных ngModel в Angular. Используя эти методы, вы можете гарантировать, что ваши входные данные будут иметь предопределенные значения при инициализации компонента или при выполнении определенных условий. Поэкспериментируйте с этими методами, чтобы найти тот, который лучше всего соответствует требованиям вашего приложения.

Помните, что установка значений по умолчанию для входных данных ngModel улучшает взаимодействие с пользователем и гарантирует, что ваши формы будут предварительно заполнены актуальной информацией, что снижает сложность и повышает удобство использования.