Estou com uma aplicação em Angular da versão 6, e quando clico no projeto para editar o sistema carrega a tela de edição com todos os valores, essa aplicação não está com banco de dados e não existe um back-end conectado a ela, todos os valores são estáticos.
O que preciso é desabilitar algumas propriedades do formulários para que o usuário consiga editar alguns campos e outros campos não esteja disponível para o usuário alterar como é o meu caso de não permitir o usuário de alterar o campo descrição.
A minha tentativa foi colocar ela linha de código abaixo;
recipeIngredients.get('recipeForm').disable();
Porém não tive sucesso, o que ele tem feito é não mostrar as informações em tela. Alguém teria alguma sugestão para resolver meu problema por favor?
Se trata de um formulário reativo.
Esse é o componente completo;
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
import { RecipeService } from '../recipe.service';
@Component({
selector: 'app-recipe-edit',
templateUrl: './recipe-edit.component.html',
styleUrls: ['./recipe-edit.component.css']
})
export class RecipeEditComponent implements OnInit {
id: number;
editMode = false;
recipeForm: FormGroup;
constructor(private route: ActivatedRoute,
private recipeService: RecipeService,
private router: Router) {
}
ngOnInit() {
this.route.params
.subscribe(
(params: Params) => {
this.id = +params['id'];
this.editMode = params['id'] != null;
this.initForm();
}
);
}
onSubmit() {
// const newRecipe = new Recipe(
// this.recipeForm.value['name'],
// this.recipeForm.value['description'],
// this.recipeForm.value['imagePath'],
// this.recipeForm.value['ingredients']);
if (this.editMode) {
this.recipeService.updateRecipe(this.id, this.recipeForm.value);
} else {
this.recipeService.addRecipe(this.recipeForm.value);
}
this.onCancel();
}
onAddIngredient() {
(<FormArray>this.recipeForm.get('ingredients')).push(
new FormGroup({
'name': new FormControl(null, Validators.required),
'amount': new FormControl(null, [
Validators.required,
Validators.pattern(/^[1-9]+[0-9]*$/)
])
})
);
}
onDeleteIngredient(index: number) {
(<FormArray>this.recipeForm.get('ingredients')).removeAt(index);
}
onCancel() {
this.router.navigate(['../'], {relativeTo: this.route});
}
private initForm() {
let recipeName = '';
let recipeImagePath = '';
let recipeDescription = '';
let recipeIngredients = new FormArray([]);
if (this.editMode) {
const recipe = this.recipeService.getRecipe(this.id);
recipeName = recipe.name;
recipeImagePath = recipe.imagePath;
recipeDescription = recipe.description;
recipeIngredients.get('recipeForm').disable();
if (recipe['ingredients']) {
for (let ingredient of recipe.ingredients) {
recipeIngredients.push(
new FormGroup({
'name': new FormControl(ingredient.name, Validators.required),
'amount': new FormControl(ingredient.amount, [
Validators.required,
Validators.pattern(/^[1-9]+[0-9]*$/)
])
})
);
}
}
}
this.recipeForm = new FormGroup({
'name': new FormControl(recipeName, Validators.required),
'imagePath': new FormControl(recipeImagePath, Validators.required),
'description': new FormControl(recipeDescription, Validators.required),
'ingredients': recipeIngredients
});
}
}
Para quem quiser ter acesso ao projeto completo, está no meu repositório;