Угловой материал: реактивный или шаблон?

Question

Я новичок в разработке пользовательского интерфейса и полностью создаю новое приложение Angular 7 Material.

Я работаю над формой, которая примет URL-адрес в качестве входного, а затем обновит себя даннымииз URL (в полях ввода только для чтения).Из того, что я понял, подход на основе шаблонов наиболее подходит для этого варианта использования, верно?Я использую компоненты Material, но я не могу найти примеры материалов на основе шаблонов, и меня очень смущает вопрос, какие теги использовать когда.

Может ли кто-нибудь дать некоторые рекомендации / предложения, иуказать мне учебник, которому я могу следовать?

Примечание: я не думаю, что пост, на который ссылаются ниже, касается моей проблемы, потому что в нем нет примеров.

Answer 1

Если вы еще не проверили это, попробуйте https://blog.angular -university.io / Введение в угловой-2-формы-шаблон-управляемый-vs-модель-управляемый /

Я обычно работаю с производными от шаблонов формами и не вижу с ними проблем, однако иногда, когда вам нужны более сложные проверки, использование этого подхода может быть несколько затруднительным.Но что мне нравится в шаблонах производных форм, так это то, что вы просто создаете объект (модель) и передаете его в [(ngModel)] , и у вас есть прекрасные два способа связывания данных.Все, что вам нужно сделать, это просто извлечь данные и десериализовать их в вашу модель, и там у вас есть данные в форме.если вам нужно просто прочитать функциональность, вы можете просто использовать метки вместо входов и отключить их.Я надеюсь, что следующий пример поможет вам понять, как это выглядит.

<form #userForm="ngForm">
  <div>
    <mat-form-field>
      <mat-label *ngIf="someconditionToShow">Name:</mat-label>
      <mat-error>Name is required</mat-error>
      <input matInput type="text" placeholder="Please enter your name" name="nameInput"
        [(ngModel)]="model.Name" [disabled]="conditionToDisable" required>
    </mat-form-field>
  </div>
  <button type="button" disabled="userForm.invalid"></button>
</form>