Угловая реактивная форма радиокольца проверено состояние не работает

#angular

#угловой

Вопрос:

Я хочу установить предварительно выбранное значение для радиовхода в зависимости от условий, но оно не работает со мной, оно не выбрано. Я использую реактивные формы.

[checked]="uploadname === item.name"

Не могли бы вы, пожалуйста, помочь:

 lt;form class="p-4" [formGroup]="uploadForm" (ngSubmit)="onSubmit()"gt;  lt;div *ngFor="let item of products;let x = index"gt;  lt;input  formControlName="productName"  (change)="getProductDetails(item,item.name)"  class="radio-label hidden"  type="radio"  id="{{'itemid'   x}}"  [value]="item.name"  [checked]="uploadname === item.name"  /gt;  lt;label class="button-label" for="{{'itemid'   x}}"gt;  lt;img [src]="item.images[0].img" /gt;  lt;pgt;{{item.name | translate}}lt;/pgt;  lt;/labelgt;  lt;/divgt; lt;/formgt;

А это файл .ts

 export class UploadComponent implements OnInit {  @Input()  products;  productName;  product: Product;  uploadname = '';  constructor(  private modalService: NgbModal,  private ProductsListService: ProductsListService,  private router: ActivatedRoute,  private route: Router  ) {}  ngOnInit(): void {  let str = this.router.snapshot.params.product;  this.uploadname = str[0].toUpperCase()   str.slice(1);  this.products = this.ProductsListService.productItems();  }  uploadForm = new FormGroup({  productName: new FormControl('', [Validators.required]),  });  onSubmit() {  console.warn(this.uploadForm.value);  }  get uf() {  return this.uploadForm.controls;  console.warn(this.uploadForm.controls);  }  getProductDetails(item: any, name: string): void {  this.product = this.ProductsListService.productDetails(name);  console.warn(this.product.size);  } }

Ответ №1:

Вот как работают угловые реактивные формы, если вы хотите установить предустановленные значения для своей формы, вам на самом деле нужно установить значение formControl вместо. checked в шаблоне будет переопределено значение элемента управления формой, которое в вашем случае является пустой строкой '' . Таким образом, когда вы получите значение для this.uploadName , вы можете использовать setValue его для установки значения для элемента управления формой:

 this.uploadForm.get('productName').setValue(this.uploadname);