Angular form memo

form.md

Reactive Form sample

<textarea [formControl]="formControl" [maxlength]="length">
<span *ngIf="formControl.dirty"> dirty </span>
<button [disabled]="formControl.invalid">submit</button>

Custom Validator

function passwordMatch(): ValidatorFn {
    return (formGroup) => {
        const pwd = formGroup.get('password');
        const confirm = formGroup.get('confirm');
        if (pwd.value === confirm.value) {
            return null;
        } else {
            return {
                passwordMatch: true
            }
        }
    }
}
`
<input formControlName="confirm">
<small *ngIf="formGroup.hasError('passwordMatch') && formGroup.get('password').touched"></small>
`

Reactive (Http) Form

export function stateDelivery(http: HttpClient){
    return (control: FormControl): Observable<ValidationErrors | null> => {
        return http.get<any>('url').pipe(
            map(x => x.name),
            map(name => name === 'Jobs'),
            map(isJobs => isJobs ? null : { notJobs: 'msg' } ),
            catchError(err => of({noJobs: 'fuck error'})
        );
    }
}

Complex Form

<form formGroup="formGroup">
    <div formArrayName="abilities">
        <div *ngFor="let a of abilities.controls; let i = index" [formGroupName]="i">
            <div>{{a.get('name').value}}</div>
        </div>
    </div>
</form>

this.form = this.pubSubService.getValue();
let array: FormArray = this.form.abilities;
if (array.length == 0) {
    array = this.fb.array([
        this.group(new Ability('Strength', this.strength)),
        this.group(new Ability('Dexterity', this.strength)),
    ])
}
this.formGroup = this.fb.group({
    abilities: abilityArray
});

get abilities(): FormArray {
    return this.formGroup.get('abilities') as FormArray;
}

export class Ability {
    name: string;
    stat = new FormControl(0);
    total = new FormControl({value:0, disabled: true});
    totalMod = new FormControl({value:0, disabled: true});
    modifier: FormControl;
    constructor(name: string, modifier: number) {
        this.name = name;
        this.modifier = new FormControl({value: modifier, disabled: true});
        this.onChanges();
    }
    private onChanges() {
        this.stat.valueChanges.subscribe(stat => {
            const total = Number(stat) + Number(this.modifier.value);
            const mod = Math.floor((total - 10) / 2));
            this.total.patchValue(total);
            this.modifier.patchValue(mod);
        });
    }
}

export class PubSubService {
    form = new BehaviorSubject<any>(null);
    update(object?: any): void {
        this.form.next(object);
    }
    getValue(): any {
        return this.form.getValue();
    }
    onUpdate(): Observable<any> {
        return this.form.asObservable();
    }
}