.msg Audit Tool Documentation
  1. Components
  2. ContactPersonFormComponent

File

src/app/shared/components/forms/contact-person-form/contact-person-form.component.ts

Extends

AbstractFormComponent

Implements

OnInit

Metadata

selector app-contact-person-form
styleUrls ./contact-person-form.component.scss
templateUrl ./contact-person-form.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor(formBuilder: FormBuilder, dialogService: NbDialogService)
Defined in src/app/shared/components/forms/contact-person-form/contact-person-form.component.ts:16
Parameters :
Name Type Optional
formBuilder FormBuilder No
dialogService NbDialogService No

Inputs

contactPerson
Type : ContactPerson
Defined in src/app/shared/components/forms/contact-person-form/contact-person-form.component.ts:13
submitButtonName
Type : string
Defined in src/app/shared/components/forms/contact-person-form/contact-person-form.component.ts:14
cancelButtonName
Type : string
Inherited from AbstractFormComponent
Defined in AbstractFormComponent:8
submitButtonName
Type : string
Inherited from AbstractFormComponent
Defined in AbstractFormComponent:7

Outputs

formSubmitted
Type : EventEmitter
Defined in src/app/shared/components/forms/contact-person-form/contact-person-form.component.ts:16
cancelled
Type : EventEmitter
Inherited from AbstractFormComponent
Defined in AbstractFormComponent:9

Methods

ngOnInit
ngOnInit()
Defined in src/app/shared/components/forms/contact-person-form/contact-person-form.component.ts:58
Returns : void
onSubmit
onSubmit()
Defined in src/app/shared/components/forms/contact-person-form/contact-person-form.component.ts:72
Returns : void
onCancel
onCancel()
Inherited from AbstractFormComponent
Defined in AbstractFormComponent:15
Returns : void

Properties

formGroup
Type : FormGroup
Inherited from AbstractFormComponent
Defined in AbstractFormComponent:11

Accessors

forename
getforename()
Defined in src/app/shared/components/forms/contact-person-form/contact-person-form.component.ts:22
surname
getsurname()
Defined in src/app/shared/components/forms/contact-person-form/contact-person-form.component.ts:26
salutation
getsalutation()
Defined in src/app/shared/components/forms/contact-person-form/contact-person-form.component.ts:30
title
gettitle()
Defined in src/app/shared/components/forms/contact-person-form/contact-person-form.component.ts:34
companyName
getcompanyName()
Defined in src/app/shared/components/forms/contact-person-form/contact-person-form.component.ts:38
department
getdepartment()
Defined in src/app/shared/components/forms/contact-person-form/contact-person-form.component.ts:42
sector
getsector()
Defined in src/app/shared/components/forms/contact-person-form/contact-person-form.component.ts:46
corporateDivision
getcorporateDivision()
Defined in src/app/shared/components/forms/contact-person-form/contact-person-form.component.ts:50
contactInformation
getcontactInformation()
Defined in src/app/shared/components/forms/contact-person-form/contact-person-form.component.ts:54
 
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ContactPerson } from 'src/app/core/data/models/contact-person.model';
import { FormBuilder, Validators } from '@angular/forms';
import { NbDialogService } from '@nebular/theme';
import { AbstractFormComponent } from '../abstract-form-component';

@Component({
  selector: 'app-contact-person-form',
  templateUrl: './contact-person-form.component.html',
  styleUrls: ['./contact-person-form.component.scss'],
})
export class ContactPersonFormComponent extends AbstractFormComponent implements OnInit {
  @Input() contactPerson: ContactPerson;
  @Input() submitButtonName: string;

  @Output() formSubmitted = new EventEmitter<Partial<ContactPerson>>();

  constructor(private formBuilder: FormBuilder, protected dialogService: NbDialogService) {
    super(dialogService);
  }

  get forename() {
    return this.formGroup.get('forename');
  }

  get surname() {
    return this.formGroup.get('surname');
  }

  get salutation() {
    return this.formGroup.get('salutation');
  }

  get title() {
    return this.formGroup.get('title');
  }

  get companyName() {
    return this.formGroup.get('companyName');
  }

  get department() {
    return this.formGroup.get('department');
  }

  get sector() {
    return this.formGroup.get('sector');
  }

  get corporateDivision() {
    return this.formGroup.get('corporateDivision');
  }

  get contactInformation() {
    return this.formGroup.get('contactInformation');
  }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      forename: [this.contactPerson?.forename, Validators.required],
      surname: [this.contactPerson?.surname, Validators.required],
      salutation: [this.contactPerson?.salutation],
      title: [this.contactPerson?.title],
      companyName: [this.contactPerson?.companyName, Validators.required],
      department: [this.contactPerson?.department],
      sector: [this.contactPerson?.sector],
      corporateDivision: [this.contactPerson?.corporateDivision, Validators.required],
      contactInformation: [this.contactPerson?.contactInformation],
    });
  }

  onSubmit() {
    const contactPerson: Partial<ContactPerson> = {
      forename: this.forename.value,
      surname: this.surname.value,
      salutation: this.salutation.value,
      title: this.title.value,
      companyName: this.companyName.value,
      department: this.department.value,
      sector: this.sector.value,
      corporateDivision: this.corporateDivision.value,
      contactInformation: this.contactInformation.value,
    };

    this.formSubmitted.emit(contactPerson);
  }
}

<form [formGroup]="formGroup" data-cy="contact-data-form">
  <nb-card>
    <nb-card-header>
      <nb-icon icon="person-outline"> </nb-icon>
      Neue Kontaktperson
    </nb-card-header>
    <nb-card-body>
      <div class="grid-1-1 mb-2">
        <div>
          <label class="label">Anrede</label>
          <nb-select placeholder="Frau" formControlName="salutation" fullWidth data-cy="contact-salutation-input">
            <nb-option value="FRAU" data-cy="salutation-option">Frau</nb-option>
            <nb-option value="HERR" data-cy="salutation-option">Herr</nb-option>
            <nb-option value="DIVERS" data-cy="salutation-option">Divers</nb-option>
          </nb-select>
          <div *ngIf="salutation.invalid && salutation.touched">
            <label class="label text-danger" data-cy="missing-label">Anrede wählen</label>
          </div>
        </div>
        <div>
          <label class="label">Titel</label>
          <input placeholder="Dr." [status]="title.invalid && title.touched ? 'danger' : 'basic'" formControlName="title" nbInput fullWidth data-cy="contact-title-input" />
          <div *ngIf="title.invalid && title.touched">
            <label class="label text-danger" data-cy="missing-label">Titel eintragen</label>
          </div>
        </div>
      </div>
      <div class="grid-1-1 mb-2">
        <div>
          <label class="label">Vorname</label>
          <input placeholder="Max" [status]="forename.invalid && forename.touched ? 'danger' : 'basic'" formControlName="forename" nbInput fullWidth data-cy="contact-forename-input" />
          <div *ngIf="forename.invalid && forename.touched">
            <label class="label text-danger" data-cy="missing-label">Vornamen eintragen</label>
          </div>
        </div>
        <div>
          <label class="label">Nachname</label>
          <input placeholder="Mustermann" [status]="surname.invalid && surname.touched ? 'danger' : 'basic'" formControlName="surname" nbInput fullWidth data-cy="contact-surname-input" />
          <div *ngIf="surname.invalid && surname.touched">
            <label class="label text-danger" data-cy="missing-label">Nachnamen eintragen</label>
          </div>
        </div>
      </div>
      <div class="grid-1-1 mb-2">
        <div>
          <label class="label">Unternehmen</label>
          <input placeholder="msg systems AG" [status]="companyName.invalid && companyName.touched ? 'danger' : 'basic'" formControlName="companyName" nbInput fullWidth data-cy="company-name-input" />
          <div *ngIf="companyName.invalid && companyName.touched">
            <label class="label text-danger" data-cy="missing-label">Unternehmen eintragen</label>
          </div>
        </div>
        <div>
          <label class="label">Abteilung</label>
          <input
            placeholder="Softwareentwicklung"
            [status]="department.invalid && department.touched ? 'danger' : 'basic'"
            formControlName="department"
            nbInput
            fullWidth
            data-cy="company-department-input"
          />
          <div *ngIf="department.invalid && department.touched">
            <label class="label text-danger" data-cy="missing-label">Abteilung eintragen</label>
          </div>
        </div>
      </div>
      <div class="grid-1-1 mb-2">
        <div>
          <label class="label">Unternehmensbereich</label>
          <input
            placeholder="msg Public Sector"
            [status]="corporateDivision.invalid && corporateDivision.touched ? 'danger' : 'basic'"
            formControlName="corporateDivision"
            nbInput
            fullWidth
            data-cy="company-division-input"
          />
          <div *ngIf="corporateDivision.invalid && corporateDivision.touched">
            <label class="label text-danger" data-cy="missing-label">Unternehmensbereich eintragen</label>
          </div>
        </div>
        <div>
          <label class="label">Branche</label>
          <input placeholder="Software" [status]="sector.invalid && sector.touched ? 'danger' : 'basic'" formControlName="sector" nbInput fullWidth data-cy="company-sector-input" />
          <div *ngIf="sector.invalid && sector.touched">
            <label class="label text-danger" data-cy="missing-label">Branche eintragen</label>
          </div>
        </div>
      </div>
      <label class="label">Kontaktinformation</label>
      <textarea spellcheck="false" nbInput formControlName="contactInformation" placeholder="Erreichbar unter..." fullWidth data-cy="contact-info-input"></textarea>
    </nb-card-body>
    <nb-card-footer>
      <button (click)="onCancel()" hero nbButton data-cy="cancel-data-form">
        abbrechen
      </button>
      <button (click)="onSubmit()" [disabled]="formGroup.invalid" status="primary" hero nbButton data-cy="submit-data-form">
        {{ submitButtonName }}
      </button>
    </nb-card-footer>
  </nb-card>
</form>

./contact-person-form.component.scss 

@import 'src/sass/utils';

nb-card {
  margin: 0 10px;
}

nb-card-footer {
  display: flex;
  justify-content: space-between;
  border-radius: 0;
  padding: 10px 20px 10px 20px;
}

.criteria-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;

  @media screen and (max-width: 600px) {
    grid-template-columns: 1fr;
  }
}

.field-item-audit-name {
  margin-bottom: 20px;
}

textarea {
  resize: vertical;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""