0
コントローラに値（マルチセレクト）を設定できる選択項目があります。しかし、コントローラの値を入力すると、このフィールドは必須なので、選択はまだ無効と表示されます。angularjs - コントローラの指定された値はまだ無効です
以下のマークアップ。私は、プログラムコントローラから選択値を設定し、フィールドが無効でないことを確認してくださいするにはどうすればよい
<div ng-controller="host.views.newAnnouncement.index as vm">
<div class="portlet light bordered" id="form_wizard_1">
<div class="portlet-title">
<div class="caption">
<i class=" icon-speech font-blue"></i>
<span class="caption-subject font-blue bold">
New Announcement
</span>
</div>
</div>
<div class="portlet-body">
<div class="col-md-12">
<div class="alert alert-danger" ng-show="vm.isInError">
<p ng-repeat="message in vm.errorMessages">{{message}}</p>
</div>
<ng-form name="vm.announcementForm">
<div class="form-group form-md-line-input form-md-floating-label no-hint"
ng-class="{'has-error': (vm.announcementForm.announcementTypes.$dirty || vm.isValidated) && vm.announcementForm.announcementTypes.$invalid}">
<select class="form-control" name="announcementTypes" id="announcementTypes"
ng-class="{'edited': vm.model.announcementType}"
ng-model="vm.model.announcementType"
ng-options="announcementType.id as announcementType.name for announcementType in vm.announcementTypes"
required></select>
<label for="announcementTypes">Announcement Type</label>
</div>
<div class="form-group form-md-line-input no-hint"
ng-class="{'has-error': (vm.announcementForm.audienceTypes.$dirty || vm.isValidated) && vm.announcementForm.audienceTypes.$invalid}">
<select class="form-control" name="audienceTypes" id="audienceTypes"
ng-class="{'edited': vm.model.audienceType}"
ng-model="vm.model.audienceType"
ng-options="audienceType.id as audienceType.name for audienceType in vm.audienceTypes"
ng-change="vm.onAudienceTypeChange()"
required></select>
<label for="audienceTypes">Audience Type</label>
</div>
<div class="form-group form-md-line-input no-hint"
ng-class="{'has-error': (vm.announcementForm.audiences.$dirty || vm.isValidated) && vm.announcementForm.audiences.$invalid}">
<select class="form-control" name="audiences" id="audiences"
ng-class="{'edited': vm.model.audiences}"
ng-model="vm.model.audiences"
ng-options="audience.id as audience.name for audience in vm.audienceList | orderBy:'name'"
multiple required
style="min-height:300px;"></select>
<label for="audiences">Audience List <span ng-if="vm.model.audiences.length > 0">(Selected: {{vm.model.audiences.length}})</span></label>
</div>
<div class="form-group form-md-line-input form-md-floating-label no-hint"
ng-class="{'has-error': (vm.announcementForm.subject.$dirty || vm.isValidated) && vm.announcementForm.subject.$invalid}">
<input type="text" name="subject" class="form-control" ng-class="{'edited':vm.model.subject}" ng-model="vm.model.subject" maxlength="50" required>
<label>Subject</label>
</div>
<br />
<div class="form-group">
<label>Details</label>
<text-angular ta-text-editor-class="form-content" ta-html-editor-class="form-content" ng-model="vm.model.body"></text-angular>
</div>
<div class="row form-group col-md-12">
<label class="control-label">Attachement (zip)</label>
<input name="file" type="file" id="attachements" nv-file-select="" uploader="vm.fileUploader" accept=".zip"/>
</div>
</ng-form>
</div>
<hr />
<div class="row">
<div class="col-md-12">
<button type="button" class="btn default button-previous" ng-click="vm.back()">
<i class="fa fa-angle-left"></i> Back
</button>
<button type="button" class="btn green button-submit"
button-busy="vm.saving"
busy-text="@L("SavingWithThreeDot")"
ng-click="vm.submit()"
ng-disabled="vm.announcementForm.$invalid">
Submit
<i class="fa fa-check"></i>
</button>
</div>
</div>
</div>
</div>
コントローラ
(function() {
appModule.controller('host.views.newAnnouncement.index', [
'$scope', '$state', 'FileUploader', 'abp.services.app.hostAnnouncement', 'abp.services.app.hostSettings',
function ($scope, $state, FileUploader, announcementService, hostSettingsService) {
var vm = this;
vm.model = {
subject: '',
body: '',
announcementType: null,
audienceType: 0,
audiences: [],
feedbackId: null
};
vm.audienceList = [];
vm.announcementTypes = [
{ id: 0, name: 'General' },
{ id: 1, name: 'Penalty Invoice' },
{ id: 2, name: 'Other' }
];
vm.audienceTypes = [
{ id: 0, name: 'By Tenant' },
{ id: 1, name: 'By Store Category' },
{ id: 2, name: 'By Floor Location' },
{ id: 3, name: 'By Zone' }
];
vm.fileUploader = new FileUploader({
url: abp.appPath + 'AnnouncementDocument/UploadFileAsync',
filters: [
{
'name': 'enforceMaxFileSize',
'fn': function (item) {
return item.size <= 2097152; // 2 MiB to bytes
}
}
]
});
vm.submit = submit;
vm.back = back;
vm.onAudienceTypeChange = onAudienceTypeChange;
initialize();
vm.errorMessages = [];
vm.tenants = [];
vm.storeCategories = [];
vm.floorLocations = [];
vm.zones = [];
vm.announcementData = {
announcementId: null,
setAnnouncementId: function (announcementId) {
this.announcementId = announcementId;
}
}
function onAudienceTypeChange() {
vm.model.audiences = [];
if (vm.model.audienceType === 0) {
vm.audienceList = vm.tenants;
} else if (vm.model.audienceType === 1) {
vm.audienceList = vm.storeCategories;
} else if (vm.model.audienceType === 2) {
vm.audienceList = vm.floorLocations;
} else if (vm.model.audienceType === 3) {
vm.audienceList = vm.zones;
}
}
function initialize() {
vm.loading = true;
hostSettingsService.getAllSettings()
.success(function (result) {
_.each(result.storeCategories.split("|"), function (item) {
if (item !== "") {
vm.storeCategories.push({
name: item,
id: item
});
}
});
_.each(result.floorLocations.split("|"), function (item) {
if (item !== "") {
vm.floorLocations.push({
name: item,
id: item
});
}
});
_.each(result.zones.split("|"), function (item) {
if (item !== "") {
vm.zones.push({
name: item,
id: item
});
}
});
}).finally(function() {
announcementService.getTenants()
.success(function (result) {
vm.tenants = result;
vm.audienceList = vm.tenants;
}).finally(function() {
vm.loading = false;
autoSelectTenant($state.params);
});
});
}
function autoSelectTenant(stateParams) {
if (stateParams.tenantId && stateParams.feedbackId) {
vm.model.feedbackId = stateParams.feedbackId;
vm.model.audienceType = 0;
vm.model.audiences.push(stateParams.tenantId);
}
}
function submit() {
validate();
if (vm.isInError) return;
vm.saving = true;
vm.isValidated = true;
announcementService.createAnnouncementAsync(vm.model)
.success(function (announcementId) {
if (vm.fileUploader.queue.length > 0) {
vm.announcementData.setAnnouncementId(announcementId);
vm.fileUploader.uploadAll();
} else {
showSuccessNotification();
}
});
}
function back() {
$state.go('host.announcement');
}
function validate() {
vm.isInError = false;
vm.errorMessages = [];
if (vm.model.audiences.length < 1) {
vm.errorMessages.push("Please select an audience list.");
vm.isInError = true;
}
vm.isValidated = true;
}
vm.fileUploader.onBeforeUploadItem = function (fileItem) {
fileItem.formData.push(vm.announcementData);
};
vm.fileUploader.onCompleteAll = function() {
showSuccessNotification();
};
function showSuccessNotification() {
$state.go('host.announcement');
vm.saving = false;
abp.notify.success("Announcement has been successfully published.");
}
}
]);
})();
？オーディエンス値は$ state.paramsを通過しており、vm.model.audiences配列に追加しました。しかし、UIでは、vm.model.audiencesにはまだ値が設定されていても必須としてマークされます。
EDIT：完全なhtmlとコントローラで質問を更新しました。より明確な理解のために。
のように試してみてください。 – osheh