markdown Angular2 Snippets - 表格（模板驱动）

Posted 2021-05-05

# Forms

## Template driven approach

In your app.module:  
`import { FormsModule } from '@angular/forms';`  
Now when angular detects a `<form>`will create a javascript object representation of your form.
* Register your form controls to include in this form object giving them a `name` and marking them with `ngModel`:  
`<input type="text" ngModel name="username">`
* To manage the form submit, add a local reference (equal to `ngForm`, that is the javascript object representation of the form created by Angular) to the `<form>`, and pass it to the function you attach to `ngSubmit` handler:
`<form (ngSubmit)="onSubmit(myForm)" #myForm="ngForm">`
* Finally you can:

```javascript
onSubmit(form: NgForm) {
  console.log(form);
}
```
*If we inspect the object in the consol:*
* `value` form controls in key/value pairs
* `controls` has representations of each input, with its own properties
* `dirty` tells if we have changed anything in the form
* `touched` if we have interacted
* `invalid` / `valid`

### Accesing the form with @ViewChild

* with `@ViewChild` we can access an element holding a local reference:

```javascript
export class AppComponent {

  @ViewChild('myForm') signupForm: NgForm; //access the local reference and store it in a variable of type NgForm

	//this gives you access to the form object without having to submit, 
	//this is specially useful if you need to access the form earlier to the point you submit it

  onSubmit() {
    console.log(this.signupForm);
    // use the form data
    this.user.username = this.signupForm.value.userData.username;
    // reset the form
    this.signupForm.reset(); //will empty all the inputs and also reset the state (valid, touched etc)
  }
}
```

### Adding validation

`<input ... required email>` 
* `required` is only treated as a selector to take in account when checking if form is valid
* `email` is not an html attribute, is a directive to make sure is a valid email address.

* `valid` state is checked at a `form` level and at `input` level
* classes are added to the `input` depending on the state:  
`<input ng-dirty ng-touched ng-invalid>`  
So you can:  
```scss
input.ng-touched.ng-invalid {
  border: 1px solid red
} //to affect only to inputs that have been touched
``` 

* disable the `submit` button if the `form` is not `valid`:  
`<button type="submit" ... [disabled]="!myForm.valid">` //put here the name of your local reference

* output validation messages: put a local reference in the `input`, and associate this to `ngModel`, that will expose us information about the control:
```html
<input ... #email="ngModel">
<p class="help-block" *ngIf="!email.valid && email.touched">Please enter a valid email!</p>
```     

*Built-in validator directives in Angular for template driven approach: search for "validator" in the official docs: [https://angular.io/api?type=directive](https://angular.io/api?type=directive) - everything marked with "D" is a directive and can be added to your template.*

**If you need HTML5 native validation (disabled by Angular by default) add `ngNativeValidate`to the desired input**

* we can set a default value in a field using `ngModel` **property binding**:

`defaultQuestion = 'pet';`  
```html
<select ... [ngModel]="defaultQuestion">
  <option value="pet">Your first Pet?</option>
  <option value="teacher">Your first teacher?</option>
</select>
```

* we also can use **two way data binding**:

`answer = '';`  
```html
<textarea ... [(ngModel)]="answer">
</textarea>
<p>Your reply: {{ answer }}</p>
```

### Grouping form controls

* give some visual grouping
* evaluate validity of individual groups
* give structure to our output object in our form:

```html
<div ngModelGroup="userData" #userData="ngModelGroup">
  <input ...name="username">
  <input ...name="email">
</div>
<p *ngIf="!userData.valid && userData.touched">User data not valid</p>
```

Output object:  
```javascript
value: {
  ...
  userData: {
    usename: ""
    email: ""
  }
}
```   
and also in `controls`:   
```javascript
controls: {
  question: FormControl
  userData: FormGroup
}
```

### Setting and patching form values

Example: a button than when clicked, will populate the 'username' field.
* We could use two way data binding, but remember we have our form accesed via `@ViewChild`:
`@ViewChild('myForm') signupForm: NgForm;`

So we can:  
* Set the values of all controls in the form:
```javascript
this.signupForm.setValue({ //allows us to set the value of the whole form. Here we need to pass a javascript object exactly representing our form
  userData: {
    username: suggestedName,
    email: ''
  },
  secret: 'pet',
});
```
* Set the value of specific controls in the form:
```javascript
this.signupForm.form.patchValue({ //important! you have to access .form property and then patchValue method
  userData: {
    username: suggestedName
  }
});
```