0

I'm new to UI development, and am creating a new Angular 7 Material app entirely by example.

I'm working on a form that will accept a URL as input, then refresh itself with data from the URL (in read-only input fields). From what I've gathered, a template-driven approach is most suitable for this use case, correct? I'm using Material components, but I can't find any template-driven Material examples, and I'm getting really confused as to what tags to use when.

Can someone provide some guidance/suggestions, and point me to a tutorial I can follow?

Note: I don't think the post referenced below addresses my issue, because it doesn't include examples.

CNDyson
  • 1,687
  • 7
  • 28
  • 63
  • 1
    Possible duplicate of [What are the practical differences between template-driven and reactive forms?](https://stackoverflow.com/questions/39142616/what-are-the-practical-differences-between-template-driven-and-reactive-forms) – Vlad Gincher Feb 08 '19 at 17:07
  • @VladGincher, i saw that post, but I need examples as well. – CNDyson Feb 08 '19 at 17:13

1 Answers1

1

If you haven't checked this out give it a go https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

I usually work with template deriven forms and have no issue with them, however sometimes when you need more sophisticated validations it might be a bit cumbersome to use this approach. But what I love about the template deriven forms is that you just create the object (model) and feed it to [(ngModel)] and you have the beautiful two ways data binding. All you need to do is just fetch the data and deserialize it into your model and there you have the data in the form. if you need just read functionality you can simply use labels instead of inputs and disabling them. I hope the following example will help a bit to give you an idea how it looks. 

<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>
Thriller
  • 485
  • 4
  • 11
  • This looks great! Let me try it out and I’ll accept your answer. – CNDyson Feb 08 '19 at 17:03
  • could you possibly update your example with what the read-only fields would look like? I'm unsure how to use `mat-label`. – CNDyson Feb 08 '19 at 17:12
  • I get the following error: `mat-form-field must contain a MatFormFieldControl`. Not sure what's missing... – CNDyson Feb 08 '19 at 17:35
  • you should add this to your app.module.ts import `{MatInputModule} from '@angular/material'; @NgModule({ imports: [ ... MatInputModule ... ]` – Thriller Feb 08 '19 at 22:39
  • And yes you can use `mat-label` to show the data. but to be simpler you can also use a normal label `` – Thriller Feb 08 '19 at 22:44