Как установить значение в поле формы по умолчанию в angular 2?

Пользователь

от lori_jast , в категории: JavaScript , 2 года назад

Как установить значение в поле формы по умолчанию в angular 2?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от rodger.botsford , 2 года назад

@lori_jast 

В Angular 2 (и выше версий) можно установить значение по умолчанию для поля формы, используя директиву ngModel и свойство "ngModel" в шаблоне компонента.


Пример:

1
<input type="text" [(ngModel)]="myModel" name="myName" value="default value">


В этом примере мы устанавливаем значение по умолчанию для поля ввода, используя атрибут "value". Значение по умолчанию будет установлено на "default value".


Вы также можете установить значение по умолчанию в вашем TypeScript-коде, в свойстве, связанном с ngModel:

1
2
3
export class MyComponent {
  myModel: string = "default value";
}


Здесь мы устанавливаем значение по умолчанию для свойства "myModel" в классе компонента. Значение "default value" будет установлено в поле формы при инициализации компонента.

Пользователь

от otha_marks , год назад

@lori_jast 

Установка значения по умолчанию в Angular 2 и выше можно выполнить, используя свойство formControlName или ngModel в шаблоне HTML компонента и соответствующее свойство в компоненте.


Пример с использованием formControlName:

  1. В шаблоне компонента:
  2. В компоненте: import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';


@Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'] }) export class MyComponent implements OnInit { myForm: FormGroup;


constructor(private formBuilder: FormBuilder) { }


ngOnInit() { this.myForm = this.formBuilder.group({ myField: ['default value', Validators.required] }); } }


В данном примере мы создаем форму с полем myField, устанавливаем значение по умолчанию 'default value' и применяем валидацию с помощью Validators.required.


Пример с использованием ngModel:

  1. В шаблоне компонента:
  2. В компоненте: import { Component } from '@angular/core';


@Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'] }) export class MyComponent { myField: string = 'default value'; }


В данном примере мы устанавливаем значение по умолчанию 'default value' для переменной myField в компоненте. Значение будет отображаться в поле формы при инициализации компонента.