htlstp.if.scre

# Angular Forms

---
#### Motivation
```angular181html
<label>
  Name: <input [(ngModel)]='name'>
</label>
<input [(ngModel)]='port' type='number'>
<button (click)='addEnvVar()'>+</button>
@for (envVar of envVars(); track $index) {
  <input [(ngModel)]='envVar.name'>
  <input [(ngModel)]='envVar.value'>
}
<button (click)='submit()'>Deploy</button>

```
* Validierung?

* Dynamisches Form?

* Komplexeres Form?

---
#### `FormControl`

```typescript
name = new FormControl('');
```

```angular181html
<label>
  Name: <input [formControl]='name'>
</label>
<p>Deploying {{ name.value }}</p>
```

<ul>
    <li class="fragment fade-in"><strong>ein</strong> Input</li>
    <li class="fragment fade-in">Two-Way-Binding</li>
</ul>

---
#### `FormGroup`
```typescript
deployForm = new FormGroup({
  'name': new FormControl(''),
  'port': new FormControl(80)
});
```

```angular181html
<form [formGroup]='deployForm'>
  <label for='name'>Name: </label>
  <input id='name' formControlName='name'>

<label>
    Port: <input formControlName='port' type='number'>
  </label>
</form>
<p>{{ deployForm.value | json }}</p>

```

* mehrere Inputs

----
#### Submit
```angular181html
<form [formGroup]='deployForm' (ngSubmit)='onSubmit()'>
  ...
  <button type='submit' [disabled]='!deployForm.valid'>
    Deploy
  </button>
</form>
```

```typescript
onSubmit() {
  console.log(this.deployForm.value);
}
```

----
#### Setting/Updating
```typescript
setValue() {
  this.deployForm.setValue({
    'name': '',
    'port': 80
  });
}
```

Setzt **alle** Werte

```typescript
updateValue() {
  this.deployForm.patchValue({
    'name': ''
  });
}
```

---
#### `FormBuilder`
```typescript
deployForm = new FormGroup({
  'name': new FormControl(''),
  'port': new FormControl(80)
});
```

```typescript
formBuilder = inject(FormBuilder);

deployForm = this.formBuilder.group({
  'name': [''],
  'port': [80]
});
```

`form.reset()` => null

```typescript
formBuilder = inject(FormBuilder).nonNullable;
```

`form.reset()` => default

---
#### `FormArray`
```typescript
deployForm = this.formBuilder.group({
  ...
  'envVars': this.formBuilder.array([
    this.formBuilder.group({
      'name': ['application-name'],
      'value': ['']
    })
  ])
});
```

```angular181html
<form [formGroup]='deployForm' (ngSubmit)='onSubmit()'>
  <div formArrayName='envVars'>
    @for (envVar of deployForm.controls.envVars.controls; track $index) {
      <div [formGroupName]='$index'>
        <div>
          <label for='env-name'>Name: </label>
          <input id='env-name' formControlName='name'>
          <label for='env-value'>Value: </label>
          <input id='env-value' formControlName='value'>
        </div>
      </div>
    }
  </div>
```

----
<div class="fragment fade-in">
<p>Hinzufügen</p>
<pre class="reveal stretch"><code class="hljs typescript" data-trim data-noescape>
addEnvVar() {
  (this.deployForm.controls.envVars as FormArray).push(
    this.formBuilder.group({
      'name': [''],
      'value': ['']
    })
  );
}
</code></pre>
</div>

Bei leeren Arrays Typstellvertreter hilfreich

```
'envVars': this.formBuilder.array
  <FormGroup<{ name: AbstractControl, value: AbstractControl }>>
  ([], {validators: this.unique()})
```

---
#### Validation
```typescript
deployForm = this.formBuilder.group({
  'name': ['', Validators.required],
  'port': [80,
    [ // synchronous Validators
      Validators.required,
      Validators.min(1),
      Validators.max(65535),
      this.validPort()
    ],
    Validators.customAsync // asynchronous Validators
  ],
  'envVars': this.formBuilder.array([], {validators: this.unique()})
}, {validators: this.globalValidation()});
```

```typescript
validPort(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const port = control.value;
    return [0, 443, 5432].find(p => p == port) 
        ? {'Invalid port': port} // validation error 
        : null; // no error
  };
}
```

----
#### CSS

<div class="fragment fade-in">
<pre><code class="hljs css" data-trim data-noescape>
.ng-touched:not(form,div) {
    border-left: 5px solid blue;
}
</code></pre>
<p>Element war einmal im Focus</p>
</div>

<div class="fragment fade-in">
<pre><code class="hljs css" data-trim data-noescape>
.ng-dirty:not(form) {
    border-right: 5px solid green;
}
</code></pre>
<p>Element-value wurde verändert</p>
</div>

<div class="fragment fade-in">
<pre><code class="hljs css" data-trim data-noescape>
.ng-invalid.ng-touched:not(form), 
  .ng-invalid.ng-dirty:not(form) {
    border-left: 5px solid red;
}
</code></pre>
<p><code>Validator</code> liefert <code>Error</code></p>
</div>

----
#### Error Messages

```text
@if (deployForm.controls.port.invalid &&
  (deployForm.controls.port.touched || deployForm.controls.port.dirty)) {
  Error: 
  @if (deployForm.controls.port.errors?.['Invalid port']) {
    Forbidden port
  }
  @if (deployForm.controls.port.errors?.['min']) {
    Port must be positive
  }
}
```