matsen-tool-fe/matsen-tool/src/app/_views/posts/new-post/new-post.component.html

<h2 *ngIf="!posting.id">{{'basic.new-post' | translate}}</h2>
<h2 *ngIf="posting.id">{{'basic.edit-post' | translate}}</h2>
<div class="spt-form">
    <form [formGroup]="postForm" (ngSubmit)="onSubmit()">
        <div class="mb-3">
            <label for="headline" class="form-label">{{'form.headline' | translate}}:</label>
            <input type="text" class="form-control" id="headline" formControlName="headline" />
            <div class="form-text" *ngIf="postForm.get('headline')?.invalid && postForm.get('headline')?.touched">
                {{'form.headline' | translate}} {{'form.mandatory' | translate}}.
            </div>
        </div>

        <div class="mb-3">
            <app-search-select *ngIf="this.posting.id === null || this.posting.id === undefined" #productSearchSelect
                               [formId]="'productIri'"
                               [formLabelLangKey]="'form.product'"
                               [documentForm]="postForm"
                               [getDataFunction]="getProducts"
                               [dataSource]="dataSourceProducts"
                               [searchSelectColDefs]="colDefProducts"
            >
            </app-search-select>
            <input type="hidden" *ngIf="this.posting.id === null || this.posting.id === undefined" formControlName="product"/>
            <input type="text" *ngIf="this.posting.id !== null && this.posting.id !== undefined" class="form-control" disabled value="{{posting.product?.name}}" />
        </div>

        <div class="mb-3">
            <label for="message" class="form-label">{{'form.message' | translate}}:</label>
            <textarea class="form-control" id="message" formControlName="message" cols="50" rows="5"></textarea>
            <div class="form-text" *ngIf="postForm.get('message')?.invalid && postForm.get('message')?.touched">
                {{'form.message' | translate}} {{'form.mandatory' | translate}}.
            </div>
        </div>

        <button type="submit" class="btn btn-primary" [disabled]="postForm.invalid">{{'form.send' | translate}}</button>
    </form>
</div>