Ссылочные переменные шаблона: назначение ngForm и ngModel - PullRequest
Новая
       26

Ссылочные переменные шаблона: назначение ngForm и ngModel

0 голосов
/ 14 февраля 2020

Я изучаю Angular на Pluralsight, и у меня есть вопрос относительно курса, который я сейчас прохожу.

Я запутался в рассуждениях о ссылочных переменных шаблона, когда им присваивается значение. Например, если вы поместите #name в тег <input>, я понимаю, что имя теперь может ссылаться на тег ввода и его связанное значение. У меня есть вопрос относительно декалирований, таких как #name="ngModel"

Просматривая документацию Angular, я нашел это:

Вам нужна переменная ссылки на шаблон для доступа к полям ввода Angular контроль из шаблона. Здесь вы создали переменную с именем name и дали ей значение «ngModel».

Я также нашел этот полезный ответ, который поможет мне на правильном пути.

Но мне все еще немного неясно, какое значение присваивает переменная ссылки на шаблон ngModel.

Часть формы, которую я сейчас пишу: 

<form #form="ngForm" (ngSubmit)="onSubmit(form)">

        <div class="form-group">
            <label for="name">Name</label>
            <input id="name" name="name" class="form-control" [(ngModel)]="userSettings.name"
                    required #nameField="ngModel"
                    (blur)="onBlur(nameField)"
                    [class.field-error]="form.submitted && nameField.invalid">
            <div [hidden]="!form.submitted || nameField.valid"
                class="alert alert-danger">
                Enter a name
            </div>
        </div>

Часть Typescript file: 

@Component({
  selector: 'app-user-settings-form',
  templateUrl: './user-settings-form.component.html',
  styleUrls: ['./user-settings-form.component.css']
})
export class UserSettingsFormComponent implements OnInit {

  originalUserSettings: UserSettings = {
    name: null,
    emailOffers: null,
    interfaceStyle: null,
    subscriptionType: null,
    notes: null
  };

  userSettings: UserSettings = { ...this.originalUserSettings };

  constructor() { }

  ngOnInit(): void {

  }

В чем разница между использованием #nameField против #nameField="ngModel" и #form против #form="ngForm"?

1 Ответ

0 голосов
/ 14 февраля 2020

Я не уверен, на какую документацию вы смотрели, но вы можете посмотреть здесь => https://angular.io/guide/template-syntax#input -and-output-properties

Короткий ответ: обычно вы объявляете переменные шаблона без присвоения им имени => #variable <=, и это даст вам доступ к элементу html и его значению. В некоторых редких случаях, как в случае с ngForm и ngModel, которые называются директивами, они дают вам, например, возможность отслеживать значение и действительность каждого элемента управления в форме => ngForm.

...