mapPropertyErrors seems to only return null

Question

I can't seem to get the automatic error messages working. My configuration seems to be correct from what I've read online, yet the error always get's picked up in the catch after using the repository.save(entity) function. I'm specifically trying to get an error related to leaving the field empty but :required="true" doesn't seem to help. Could it be because they are translation fields? My entity is called suiteseven_usp.

I've got the following definition:

protected function defineFields(): FieldCollection
{
    return new FieldCollection([
        (new IdField('id', 'id'))->addFlags(new Required(), new PrimaryKey()),
        (new TranslatedField('text'))->addFlags(new ApiAware(), new Required()),
        (new TranslatedField('subtext'))->addFlags(new ApiAware(), new Required()),
        new StringField('icon', 'icon'),
        new StringField('type', 'type'),
        new TranslationsAssociationField(UspTranslationDefinition::class, 'suiteseven_usp_id'),
    ]);
}

The following in computed: in my component:

...mapPropertyErrors('suiteseven_usp', [
        'text',
        'subtext'
    ]),

And this as one of the fields:

<sw-field
    v-model="usp.text"
    class="s7-usp-detail__text"
    :label="$tc('s7-usp.detail.fieldTextLabel')"
    :placeholder="$tc('s7-usp.detail.fieldTextPlaceholder')"
    :disabled="!acl.can('usp.editor')"
    :error="suitesevenUspTextError"
    :required="true"
    ></sw-field>

This is my save function:

onSave() {
        this.isLoading = true;
        this.isSaveSuccessful = false;

        return this.uspRepository.save(this.usp, Shopware.Context.api).then(() => {
            this.isSaveSuccessful = true;

            this.createNotificationSuccess({
                title: this.$tc('global.default.success'),
                message: this.$tc('s7-usp.detail.notificationSuccessMessage'),
            });

            if (!this.uspId) {
                this.$router.push({name: 's7.usp.detail', params: {id: this.usp.id}});
            }

            this.uspRepository.get(this.usp.id, Shopware.Context.api).then((updatedUsp) => {
                this.usp = updatedUsp;
                this.isLoading = false;

            });
        }).catch(() => {
            this.createNotificationError({
                title: this.$tc('global.default.error'),
                message: this.$tc('s7-usp.detail.notificationErrorMessage'),
            });
            this.isLoading = false;
        });
    },

Answer 1

You also need to set Required flag to TranslationsAssociationField also.

(new TranslationsAssociationField(UspTranslationDefinition::class, 'suiteseven_usp_id'))->addFlags(new Required()),