angular-challenges/apps/forms/63-child-forms/src/app/app.component.html at 831c311ea03356c1f25d354f398c6667242e0f98 · tomalaforge/angular-challenges · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<main class="min-h-screen bg-slate-50 text-slate-900">
  <div class="mx-auto max-w-4xl px-6 py-12">
    <h1 class="mb-6 text-3xl font-semibold">Order</h1>

    <form
      [formRoot]="checkoutForm"
      class="space-y-8 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
      <section class="space-y-4">
        <h2 class="text-xl font-semibold">Information</h2>
        <account-form [form]="checkoutForm.account" />
      </section>

      <section class="space-y-4">
        <h2 class="text-xl font-semibold">Shipping address</h2>
        <address-form [form]="checkoutForm.shipping" />
      </section>

      <section class="space-y-4">
        <div class="flex items-center justify-between gap-4">
          <h2 class="text-xl font-semibold">Billing address</h2>
          <label
            class="flex items-center gap-2 text-sm font-medium text-slate-700">
            <input
              type="checkbox"
              class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
              [formField]="checkoutForm.sameAsShipping" />
            Billing address same as shipping
          </label>
        </div>

        @if (!checkoutForm.sameAsShipping().value()) {
          <address-form [form]="checkoutForm.billing" />
        }
      </section>

      <div
        class="flex items-center justify-between border-t border-slate-200 pt-4">
        <div class="text-sm text-slate-600">
          <span [class.text-rose-600]="checkoutForm().invalid()">
            {{
              checkoutForm().invalid() ? 'Form incomplete' : 'Ready to submit'
            }}
          </span>
        </div>
        <button
          type="submit"
          class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-slate-300">
          Submit
        </button>
      </div>
    </form>

    <section
      class="mt-6 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
      <h3 class="mb-2 text-lg font-semibold">Preview</h3>
      <pre
        class="overflow-x-auto rounded bg-slate-900 p-4 text-sm text-slate-100"
        >{{ checkoutForm().value() | json }}</pre
      >
    </section>
  </div>
</main>