#html #angular
#HTML #angular
Вопрос:
Я использую formArray
для отображения динамических данных в таблице и их работы должным образом, но я не могу применить требуемую проверку поля. Я хочу проверить эту таблицу, чтобы ни одна запись null не могла быть сохранена.
В шаблоне:
<form *ngIf="userForm" [formGroup]="userForm">
<table>
<tbody formArrayName="order">
<ng-container *ngFor="let orderLine of properties; let i=index" [formGroupName]="i">
<tr>
<td class="fieldspacing">
<input class="form-control" formControlName="propertyName"
[readOnly]="orderLine.IsReadOnly" type="text">
<ng-container *ngIf="order.get('propertyName').hasError('required')">
<span class="errorMsg">Property name cannot be null</span>
</ng-container>
</td>
<td class="fieldspacing">
<select class="form-control selectwidth" formControlName="propertyType" type="text"
(change)="valueChange(i)">
<option *ngFor="let type of propertyTypes" value="{{type.Id}}">{{type.TypeName}}
</option>
</select>
</td>
<div *ngIf="orderLine.PropertyTypeId == 4">
<td class="fieldspacing">
<input type="checkbox" formControlName="readOnly" (change)="handleSelected($event,i)"><label> Has
Parent</label>
</td>
<td class="fieldspacing" *ngIf="orderLine.IsReadOnly || contentEditable">
<select class="form-control selectwidth" formControlName="parentProperty" type="text">
<option *ngFor="let parent of properties" [value]="parent.ParentHierarchyPropertyId">
{{parent.ParentHierarchyPropertyName}}
</option>
</select>
</td>
</div>
</tbody>
</table>
<button (click)="saveUserAdditionalProperties()" type="submit"
class="mt-4 btn btn-primary">Save</button>
</form>
В контроллере
public properties: any = [
{
"Id": "0012",
"PropertyType": null,
"PropertyTypeId": 4,
"IsReadOnly": true,
"DisplayOrder": 0,
"PropertyName": "Gender",
"ParentHierarchyPropertyId": null,
"ParentHierarchyPropertyName": null,
},
{
"Id": "1234",
"PropertyType": null,
"PropertyTypeId": 4,
"IsReadOnly": false,
"DisplayOrder": 1,
"PropertyName": "save",
"ParentHierarchyPropertyId": null,
"ParentHierarchyPropertyName": null,
},
];
loadUserProperties() {
this.userForm = this.getForm();
}
getForm(): FormGroup {
return new FormGroup({
order: new FormArray(this.properties.map(this.getFormGroupForUserProperty)),
});
}
getFormGroupForUserProperty(userProperty: any) {
let formGroup: FormGroup = new FormGroup({
propertyName: new FormControl(userProperty.PropertyName,Validators.required),
propertyType: new FormControl(userProperty.PropertyTypeId),
parentProperty: new FormControl(userProperty.ParentHierarchyPropertyId),
readOnly: new FormControl(userProperty.IsReadOnly)
});
Комментарии:
1. Можете ли вы опубликовать plunker или рабочую онлайн-ссылку? Из приведенного выше кода ваша функция getFormGroupForUserProperty ничего не возвращает . итак, я подозреваю, что там что-то идет не так.
2. @maxkart Извините, но я не могу, на самом деле это свойство userproperty — это динамические данные, которые я получаю от вызывающих конечных точек.
3. @maxkart Я отредактировал вопрос с помощью массива свойств, теперь getFormGroupForUserProperty возвращает значение, пожалуйста, проверьте.
Ответ №1:
Вам нужно использовать его для FormArray
formArray: FormArray;
constructor(
private _formBuilder: FormBuilder
) {}
this.formArray = this._formBuilder.array([]);
new Array(LENGTH_NUMBER).fill(1).forEach(() => {
this.formArray.push(this._formBuilder.group({
FORMCONTROLNAME_ONE: ["", Validators.required],
FORMCONTROLNAME_TWO: ["", Validators.required],
FORMCONTROLNAME_THREE: ["", Validators.required]
}))
});
Сторона HTML
<ng-container *ngFor="let formGroup of formArray.controls;">
<div [formGroup]="formGroup">
<input formControlName="FORMCONTROLNAME_ONE">
<input formControlName="FORMCONTROLNAME_TWO">
<input formControlName="FORMCONTROLNAME_THREE">
</div>
</ng-container>
Комментарии:
1. Спасибо @SS-Tobi, но что такое LENGTH_NUMBER ?
2. это количество форм, которые вы используете на стороне HTML для FormArray, позвольте мне добавить пример HTML-кода,,,
Ответ №2:
Очевидно, что вы можете применить фильтр к пользовательской форме, который
if(userForm.value.order.length!==0){
// submit
}else{
// not submit
}
Комментарии:
1. Спасибо @Nimesh, но я хочу проверить поле propertyName.
2. Пользовательская форма.значение. order.filter(o=>{o.propertyName!==null}) и если оно равно null, то не submit..as просто, как это
3. да, я могу использовать это как временное исправление на данный момент, но я хочу использовать требуемую проверку angular.