@angular/forms#NgForm TypeScript Examples

submit(form: NgForm): void {
    const formData = new FormData();
    formData.append('email', form.value.email);
    formData.append('username', form.value.username);
    formData.append('h-captcha-response', form.value.captcha);

    this.httpClient.post<boolean>('/signup', formData).subscribe(
      ok => {
        if (ok) {
          this.toastController.create({
            message: 'Sign up successful.',
            duration: 4000
          }).then(toast => toast.present());
        } else {
          this.toastController.create({
            message: 'Something wrent wrong.',
            duration: 4000
          }).then(toast => toast.present());
        }
      }
    );
  }

@Component({
  selector: 'da-toggle-widget',
  templateUrl: './toggle.widget.html',
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm }]
})
export class ToggleWidget implements OnInit {
  @Input() ui: ToggleUI;
  @Input() name: string;

  constructor() { }

  ngOnInit() {
    
  }
}

login(loginForm: NgForm){
    if(loginForm && loginForm.valid){
      let userName = loginForm.form.value.userName;
      let password = loginForm.form.value.password;

      if(this.authService.login(userName, password)){
        this.router.navigate([this.authService.redirectUrl]); //On Success redirect to agent or requester page
      }
      else{
        //Show error message
        this.loginErrorMessage = true;
      }
    }
  }

constructor(
    private readonly cdr: ChangeDetectorRef,
    @Optional() private readonly auiForm: FormDirective,
    @Optional() ngForm: NgForm,
    @Optional() formGroup: FormGroupDirective,
  ) {
    this.parentForm = formGroup || ngForm;
    if (this.auiForm) {
      this.subscribeInputsFromParent();
    }
  }

onSubmit(aswEditPropertyForm: NgForm): void {
        if (aswEditPropertyForm.invalid) {
            return;
        }
        // this.model.displayName = this.control.displayName;
        // this.model.controlType = this.control.controlType;
        // this.model.name = this.name;
        // this.model.label = this.label;
        // this.model.tooltip = this.tooltip;
        // if (this.control.controlType !== 'radio' || this.control.controlType !== 'checkbox') {
        //     this.model.style = this.style;
        // }
        // this.model.isRequired = this.isRequired;
        // this.model.options = this.options;
        // this.dialogRef.close(this.model);
    }

constructor(protected _elementRef: ElementRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
    protected _platform: Platform,
    private _cd: ChangeDetectorRef,
    @Optional() @Self() public ngControl: NgControl,
    @Optional() _parentForm: NgForm,
    @Optional() _parentFormGroup: FormGroupDirective,
    _defaultErrorStateMatcher: ErrorStateMatcher) {
    super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);

    this.id = this.id;

    if (this.ngControl) {
      this.ngControl.valueAccessor = this;
    }

  }

async submit(form: NgForm) {
    this.submitted = true;

    if (form.valid) {
      this.supportMessage = '';
      this.submitted = false;

      const toast = await this.toastCtrl.create({
        message: 'Your support request has been sent.',
        duration: 3000
      });
      await toast.present();
    }
  }

public login(form: NgForm) {
        if (form.invalid) {
            return;
        } else {
            const user = new User(null, form.value.email, form.value.password);

            this.userService.login(user, form.value.remember).subscribe(
                () => {

                    if (this.urlParams) {

                        const params = this.urlParams.split('&')

                        let newParams: any = {};

                        for (const param of Object.keys(params)) {
                            if (params[param].split('=')[1].split('%7C')[1]) {
                                let paramSplit = params[param].split('=')[1].split('%7C');
                                newParams[params[param].split('=')[0]] = paramSplit.join('|');
                            } else {
                                newParams[params[param].split('=')[0]] = params[param].split('=')[1];
                            }
                        }

                        this.router.navigate([this.returnUrl], { queryParams: newParams });
                    } else {
                        this.router.navigate([this.returnUrl]);
                    }

                },
                err => Swal.fire('Error al iniciar sesión', err.text, 'error')
            );
        }
    }

onSubmit(form: NgForm): void {
    const data = {
      ...form.value,
      vuln: this.selectedVuln,
      host: this.host['@id'],
      impact: this.selectedImpact,
      currentState: this.currentStateUser,
    };
    const callback = (body) =>
      this.hostVulnsService.insert(body).then(
        () => {
          this.openSnackBar('vulnerability added');
          this.router.navigateByUrl(
            MissionRouter.redirectToShow(this.missionId)
          );
        },
        (err) => {
          this.openSnackBar('Error : ' + err.error['hydra:description']);
        }
      );

    if (this.image) {
      this.mediaObjectsService.insert(this.image).then(({ ['@id']: id }) => {
        data.image = id;
        callback(data);
      });
    } else {
      callback(data);
    }
  }

onSubmit(form: NgForm, event: Event) {
        event.preventDefault();

        if (form.valid) {
            const jsonData = {
                title: form.value.title,
                description: form.value.description,
                src: form.value.src,
                href: form.value.href
            };

            const jsonText = JSON.stringify(jsonData);

            this.track.addCue(
                new VTTCue(form.value.startTime, form.value.endTime, jsonText)
            );
        }
    }

onSubmit(form: NgForm, model: ComplianceInfo) {
    if (!form.valid) {
      this.showValidation = true;
      return;
    }

    const message = new MsgCertifyModel(model);
    this.txService.goPreview(message, '/model-info/' + model.vid + '/' + model.pid);
  }

onSubmit(form: NgForm): void {
    this.hostvulnService.update(this.id, form.value).then(
      () => {
        this.openSnackBar('Host updated');
        this.router.navigateByUrl(MissionRouter.redirectToList());
        this.ngOnInit();
      },
      (err) => {
        if (err.status === '400') {
          this.openSnackBar('Error : ' + err.error['hydra:description']);
        }
      }
    );
  }

@Component({
  selector: 'da-textarea-widget',
  templateUrl: './textarea.widget.html',
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm }]
})
export class TextAreaWidget implements OnInit {
  @Input() ui: TextAreaUI;
  @Input() name: string;
  
  constructor() { }

  ngOnInit() {
    
  }
}

addHost(form: NgForm): void {
    this.hostsService
      .insert({
        ...form.value,
        checked: false,
        mission: this.mission['@id'],
      })
      .then(
        () => {
          this.ngOnInit();
          form.reset();
        },
        (err) => {
          if (err.status === '400') {
            this.openSnackBar('Error : ' + err.error['hydra:description']);
          }
        }
      );
  }

@Input() scanForm: NgForm;

isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }

isErrorState(
    control: FormControl | null,
    form: FormGroupDirective | NgForm | null
  ): boolean {
    return control.dirty && form.invalid;
  }

isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }

isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }

onLogin(form: NgForm) {
    this.submitted = true;

    if (form.valid) {
      this.userData.login(this.login.username);
      this.router.navigateByUrl('/app/tabs/schedule');
    }
  }

onSubmit({ value }: NgForm): void {
    super.onSubmit({
      value: {
        ...value,
        period: this.period.value,
      },
    } as NgForm);
  }

constructor(ngForm: NgForm) {
    this.form = ngForm.form;
  }

isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }

isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        const invalidCtrl = !!(control && control.invalid && control.parent.dirty);
        const invalidParent = !!(control && control.parent && control.parent.invalid && control.parent.dirty);

        return (invalidCtrl || invalidParent);
    }

isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }

onLogin(form: NgForm) {
    this.submitted = true;

    if (form.valid) {
      this.login();
    }
  }

onSubmit(_: NgForm): void {}

@ViewChild('form')
  ngForm: NgForm;

@ViewChild('form') form: NgForm;